jQuery非依存で手軽にパララックス「Rellax.js」

はじめに

jQuery非依存でパララックスエフェクトを実装できる「Rellax.js」をご紹介します。
軽量で、導入も手軽です。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

jsの読み込み

パスは適宜変えて下さい。

<script src="assets/js/rellax.min.js"></script>

パララックスの要素を設定

パララックスさせたい要素に任意のclass、今回は「rellax」を付与します。

<div class="rellax"></div>

jsを実行

<script>var rellax = new Rellax('.rellax');</script>

これだけでパララックスが実装できます。
すごい楽。
その他にもオプションが用意されています。
速さやパーセンテージ、要素の重なり順も指定することが出来ます。

<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5" data-rellax-zindex="5"></div>

デモ

サクッとデモを作成しました。
オプションの値をいじると簡単に速さ等が変えれるので楽ですね。

DEMO

同じようなパララックスを実装する手段として以前書いた記事の「Stellar.js」はjQuery依存で上下の動きに「top」プロパティを使用していましたが、「Rellax.js」の方は非依存で動きに「transform」プロパティを使用しているので動きのカクカク感はかなり違う気がします。
デモ要素の数が違いますが、Stellar.jsのデモ（こちら）も載せておくので興味あれば比べて見て下さい。

さいごに

単体で動作するうえ、導入もサクッとできるので、ぜひ使って見て下さい。
参考になればと思います。