今回は、非依存型のパララックス（視差効果）実装ライブラリの Rellax.js の紹介です。
Webサイトにおけるパララックスは、スクロールなどをした時、複数の要素を違うスピードで動かすし、立体感や遠近感などを表現する、視覚的エフェクトの事を言います。
パララックスのデモ
このページにも、Rellax.js を適応しています。画面上部の画像が他の部分のスクロールスピードに比べて少し遅くなるように実装しています。
Rellax.js の実装
Rellax.jsのサイトに行きライブラリをダウンロードしてきます。
GITHUBをクリックすると下のようなページへ移動するので、”Clone or download”よりライブラリをダウンロードしてください。
ダウンロードすると、いろいろなファイルがありますが、使用するのは、rellax.min.js のみです。
</body>タグの前辺りに、rellax.min.js を読み込んでください。※rellax.min.js ファイルまでのパスは環境によって変更してください。
WordPressの場合は、以下のような形で読み込むかと思います。
（※rellax.min.js ファイルをテンプレートフォルダ下のjsフォルダに設置した場合）
次に、rellax.js を呼び出す任意のclassを指定します。今回はrellaxというclassを指定した要素をパララックスさせます。rellax.min.jsを読み込んだ後ぐらいに入れると動作します。
HTMLのマークアップ例は以下の通りです。classでrellaxを指定するだけです。簡単ですね。
パララックスのスピードを変えたい時のオプションもあります。
data-rellax-speedを加えて任意のスピードに設定できます。（-10〜+ 10）
HTMLサンプル
このライブラリを使えば、特に難しい設定をしなくても簡単にパララックスを実装できます。皆様もぜひお試しください。