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

プロジェクトNo.24：パララックス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文で括って、目玉の移動量を１以下の数を掛けて調整しています。

// パ
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);
}

参考サイト

パララックスサイトを作ろう (全11回) - プログラミングならドットインストール

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

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

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