読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【24:パララックス3】マウスポインタの方向に目玉を動かす

f:id:seintoseiya:20150727230049p:plain
プロジェクトNo.24:パララックス3

前回に続けてパララックス効果を使ったサイト第3弾。
今回はマウスポインタの方向を目玉が追いかける様なパララックスサイトを作って見ました。

マウスイベントの取得

containerの範囲内でマウスが動いたらイベント発生。

JavaScript
$('#container').mousemove(function(e) {
	// 処理
});

マウスの座標を取得

マウスのx, y座標はe.clientX, e.clientYでそれぞれ取得できます。
今回はcontainer内かつ画面の左右中央表示なので、以下の様になります。

JavaScript
var cx = $(window).width() / 2;
var cy = $(this).height() / 2;
var dx = e.clientX - cx;
var dy = e.clientY - cy;

マウスの座標を使ってCSSを変更

後はマウスの座標を使ってCSSを変更するだけです。
目玉が飛び出さない様にif文で括って、目玉の移動量を1以下の数を掛けて調整しています。

// パ
if(dx<25 && dx>-20){
$('#box2').css('left', cx + dx * 0.5);
    $('#box3').css('left', cx + dx * 0.7);
}
if(dy<25 && dy>-20){
$('#box2').css('top', cy + dy * 0.5);
    $('#box3').css('top', cy+5 + dy * 0.7);
}

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応