jQueryでマウスの場所に合わせて遠近を出す
こちらのポカリスエットのサイトの演出が面白かったので、
自分でも作ってみることにしました。
↓こちらがデモです。
DEMO
方法
1.画像を用意する
今回は以前ブログで書いた歩くアニメーションで使った画像をそのまま使いました。
詳しくはこちらのブログをご参照ください。
2.HTMLを準備する。
こちらも前回と同様で、各画像をposition: absoluteで設置しています。
HTML
|
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
|
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.画像の移動量の定義
|
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.マウスの座標を読み取り、画面の幅からその割合を求める
|
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で比率に合わせて画像を移動する
|
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で指定しています。
Author Profile
SHARE
