マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js

parallax.jsは、マウスやジャイロセンサーの動きに合わせてパララックス効果を出してくれるライブラリです。
パララックスというとスクロールで行うというイメージがありますが、スクロールするほどコンテンツ量が無い場合に実現するのが厳しかったりします^^;。
そういう場合にサイトのアクセントとして使えそうですね。

使い方

必要なファイルを読み込む

以下から配布サイトからファイルをダウンロードして読み込みます。

parallax.jsデモ&配布サイト

parallax.jsダウンロードページ

jQuery版もありますが、今回は以下のファイルを使います。

parallax-master
└deploy
　└parallax.js

<script src="../jquery.parallax.js"></script>

html

動きをつける要素に同じクラス名を付け、ブロック要素で囲います。
ここでは#wrapという親要素に.layerという動きをつける子要素を入れています。
data-depthには、要素を重ねる深さをを指定します。数値が大きくなるほど、動く幅が大きくなります。

<div id="wrap">
    <div class="layer" data-depth="0.5"><h1>Sample</h1></div> 
    <div class="layer box1" data-depth="1.0"><p>box1</p></div>
    <div class="layer box2" data-depth="1.5"><p>box2</p></div>
    <div class="layer box3" data-depth="2.0"><p>box3</p></div>
    <div class="layer box4" data-depth="3.0"><p>box4</p></div>
</div>

javascript（デフォルト）

1行目に動かす要素を囲った親要素のidを指定します。

var scene = document.getElementById('wrap');
var parallax = new Parallax(scene);

javascript（カスタマイズ）

動く量や速度を指定出来ます。

var layer = document.getElementById('wrap');
var parallax = new Parallax(layer, {
    scalarX: 10, //レイヤーの横移動の幅
    scalarY: 10, //レイヤーの縦移動の幅
    frictionX: 0.2, //移動の速度 0～1
    frictionY: 0.2, //移動の速度 0～1
    originX: 0.5, //マウス入力の横軸初期値,デフォルト0.5
    originY: 0.8 //マウス入力の縦軸初期値,デフォルト0.5
});