Blog

jQueryでマウスの場所に合わせて遠近を出す

2013.04.17Cat:jQuery デザイナー

http://pocarisweat.jp/

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

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

 

↓こちらがデモです。
DEMO

方法

1.画像を用意する

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

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

 

2.HTMLを準備する。

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

HTML

 

CSS

 

3.jQueryを準備する

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

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

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

動きをつけます。

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

 

i.画像の移動量の定義

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

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

 

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

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

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

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

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

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

 

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

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

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

 

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

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ