[JS]スマフォなどのジャイロスコープにも対応した一味違ったパララックスを実装するスクリプト -Parallax.js

シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。

スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。

Parallax.js
Parallax.js -GitHub

• Parallax.jsのデモ
• Parallax.jsの使い方

Parallax.jsのデモ

パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。

デモページ

デスクトップではパララックスはマウスに合わせて動き、スマフォやタブレットなどのジャイロスコープにも対応しており、傾けることでゆらゆら動きます。

iPadだと傾けるだけで、ゆらゆらと

Parallax.jsの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

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

Step 2: HTML

パララックスで動かすレイヤーはリストで管理されており、各レイヤーの奥行きを0.00-1.00の間で設定します。

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

Step 3: JavaScript

レイヤーを配置して親要素をjQueryのセレクタで指定し、スクリプトを実行します。

$('.scene').parallax();

スクリプトのオプションでは、ジャイロスコープでの動きに対してどのように動かすか、動きの範囲やレイヤーの摩擦量などを設定できます。

$('.scene').parallax({
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  limitY: 10,
  scalarX: 2,
  scalarY: 8,
  frictionX: 0.2,
  frictionY: 0.8
});