http://pocarisweat.jp/

こちらのポカリスエットのサイトの演出が面白かったので、

自分でも作ってみることにしました。

↓こちらがデモです。
DEMO

方法

1.画像を用意する

今回は以前ブログで書いた歩くアニメーションで使った画像をそのまま使いました。

詳しくはこちらのブログをご参照ください。

 

2.HTMLを準備する。

こちらも前回と同様で、各画像をposition: absoluteで設置しています。

HTML

XHTML

<div id="view"> <div id="back1"><img src="images/back1.png" width="970" height="400" /></div> <div id="back2"><img src="images/back2.png" width="1150" height="400" /></div> <div id="back3"><img src="images/back3.png" width="1324" height="400" /></div> <div id="back4"><img src="images/back4.png" width="1500" height="400" /></div> <div id="back5"><img src="images/back5.png" width="2000" height="400" /></div> </div>

1 2 3 4 5 6 7

<div id="view"> <div id="back1"><img src="images/back1.png" width="970" height="400" /></div> <div id="back2"><img src="images/back2.png" width="1150" height="400" /></div> <div id="back3"><img src="images/back3.png" width="1324" height="400" /></div> <div id="back4"><img src="images/back4.png" width="1500" height="400" /></div> <div id="back5"><img src="images/back5.png" width="2000" height="400" /></div> </div>

 

CSS

CSS

#view{ margin-top: 20px; width: 950px; height: 400px; overflow: hidden; position: relative; } #back1{ width: 970px; height:400px; position: absolute; top: 0px; right: 0px; } #back2{ width: 1150px; height:400px; position: absolute; top: 0px; right: 0px; } #back3{ width: 1324px; height:400px; position: absolute; top: 0px; right: 0px; } #back4{ width: 1500px; height:400px; position: absolute; top: 0px; right: 0px; } #back5{ width: 2000px; height:400px; position: absolute; top: 0px; right: 0px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

#view{ margin-top: 20px; width: 950px; height: 400px; overflow: hidden; position: relative; } #back1{ width: 970px; height:400px; position: absolute; top: 0px; right: 0px; } #back2{ width: 1150px; height:400px; position: absolute; top: 0px; right: 0px; } #back3{ width: 1324px; height:400px; position: absolute; top: 0px; right: 0px; } #back4{ width: 1500px; height:400px; position: absolute; top: 0px; right: 0px; } #back5{ width: 2000px; height:400px; position: absolute; top: 0px; right: 0px; }

 

3.jQueryを準備する

ようやく今回の本題です。

流れとしては、マウスの座標を読み取り、

そのマウス座標の画面全体からの割合を、画像の移動の割合に当てはめることで、

動きをつけます。

画像の移動量は、はじめに定義しておきます。

 

i.画像の移動量の定義

var dstBack = new Array(5); dstBack[0] = -20; dstBack[1] = -5; dstBack[2] = -374; dstBack[3] = -550; dstBack[4] = -1050;

1 2 3 4 5 6 7

var dstBack = new Array(5);   dstBack[0] = -20; dstBack[1] = -5; dstBack[2] = -374; dstBack[3] = -550; dstBack[4] = -1050;

今回は一番後ろとその１つ前の画像は逆向きに動かし、軸を感じさせるような遠近感を出します。

そのため、一番後ろの背景の移動量(dstBack[0])が、その１つ上の画像(dstBack[1])よりも大きくなっています。

 

ii.マウスの座標を読み取り、画面の幅からその割合を求める

JavaScript

$(window).mousemove(function(e){ var dstBackPos = new Array(5); var dx = e.clientX; var windowWidth = $(window).width(); var dxPer = dx / windowWidth;

1 2 3 4 5

$(window).mousemove(function(e){ var dstBackPos = new Array(5); var dx = e.clientX; var windowWidth = $(window).width(); var dxPer = dx / windowWidth;

今回の動きは、マウスを動かすたびに動作しますので、mousemoveイベントを使っています。

ポカリスエットの演出では上下左右に動きますが、今回は利用した画像が横方向のみだったので、

横方向のみ対応しました。

そのため、e.clientXでマウス座標を読み取り、$(window).width()で画面の横サイズを読み取って、

最後に比率を求めています。

 

iii.CSSで比率に合わせて画像を移動する

for(var i = 2; i < 6; i++){ dstBackPos[i] = dstBack[i] - (dstBack[i] * dxPer); $("#view #back" + (i + 1)).css("left", dstBackPos[i] + "px"); } for(var i = 0; i < 2; i++){ dstBackPos[i] = dstBack[i] - (dstBack[i] * dxPer); $("#view #back" + (i + 1)).css("right", dstBackPos[i] + "px"); } });

1 2 3 4 5 6 7 8 9 10

for(var i = 2; i < 6; i++){ dstBackPos[i] = dstBack[i] - (dstBack[i] * dxPer); $("#view #back" + (i + 1)).css("left", dstBackPos[i] + "px"); } for(var i = 0; i < 2; i++){ dstBackPos[i] = dstBack[i] - (dstBack[i] * dxPer); $("#view #back" + (i + 1)).css("right", dstBackPos[i] + "px"); }   });

最初に定義した各画像の移動量から、マウス座標の比率分だけの移動量を引いて

CSSのleftで場所を指定して動かします。

 

後ろの２枚は逆方向に動くので、rightで指定しています。