Rellax.jsを使って簡単パララックス
今回は簡単にパララックスを実装できる「Rellax.js」の使い方をメモ。
公式サイトはこちら
DEMO
簡単なデモを作りました。
Rellax.jsのDEMO
Rellax.jsを使う準備
まずはyarnでインストール
$ yarn add -D rellaxそして読み込みます。
僕はwebpackでバンドルして使いますが、そのまま読み込むのもCDN使うのもお好みで。
今回は使い方の説明なのでCDN（ver1.9.1）を読み込むことにします。
<body>の一番下に以下のタグを設置します
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>これでRellax.jsを使う準備が整いました。
Rellax.jsの実装
さっそく実装してみましょう。
まずはJSを書きます。先ほど読み込んだタグのすぐ下に追記します。
<script>
var rellax = new Rellax('.js-rellax');
</script>「.js-rellax」というclassのついた要素に対してRellax.jsを適用します。
とりあえず動かすだけならJSはこれだけでOK。
次にHTMLを書きます。
<div class="js-rellax">
<!--パララックスさせたい要素をここに書く-->
</div>はい、できました！
たったこれだけでパララックス完成！簡単！
Rellax.js - 応用編 -
ここまでの工程ではDEMOのようにはなりません。
Rellax.jsには簡単にカスタマイズできる機能が備わっていますので、それを使っていきます。
まずスピードの調整。「data-rellax-speed」属性を付けて調整します。
何も指定しなければdefaultは-2になっているみたいです。公式のオススメは-10 から 10までの間とのこと。
<div class="js-rellax" data-rellax-speed="3"></div>次にパーセンテージの調整は「data-rellax-percentage」属性。
0.5にすると画面中央センタリングできる模様。
<div class="js-rellax" data-rellax-speed="3" data-rellax-percentage="0.5"></div>スピードの値が正（+）の場合は、
数値を大きくすると下に、
小さくすると上に少しずらすことができます。
スピードの値が負（−）の場合は逆に
数値を大きくすると上に、
小さくすると下にずれます。
こちらに関しては文章からだと想像しにくいと思うので、実際に適用してみるとわかると思います。
あとRellax.jsを適用した要素同士の重なり順を「data-rellax-zindex」で指定できます。defaultは0です。
<div class="js-rellax" data-rellax-speed="3" data-rellax-percentage="0.5" data-rellax-zindex="5"></div>JSの方では引数にオプションを一括で指定できます。
<script>
var rellax = new Rellax('.js-rellax', {
speed: -2, //速度
center: true, //センタリング
wrapper: null, //スクロールを監視する要素 指定しない場合はbodyになる
round: true, //公式に説明がない・・・若干、止まるときにイーズが効くような？
vertical: true, //縦パララックス
horizontal: false //横パララックス
});
</script>ここまでの設定を応用すれば、あとはCSS次第でDEMOと同じものが作れます。
Rellax.jsのDEMO
まとめ
今回はRellax.jsで簡単にパララックスを実装する方法を紹介しました。
スマホでもあまり重くならずに動くのでとてもオススメです。
他にも横スクロールの設定やコールバックも簡単に使えるので、使い所があれば今後試してみたいと思います。
パララックスってそもそもどうよ？っていうのは置いておいて、フロントエンドエンジニアとしては一回ぐらいはやることになるんではないかな？
そんなときにはまずRellax.jsを使ってみましょう！
追記
スクロール・パララックス関連でlax.jsというライブラリの使い方について記事を書きました。
こちらもパララックスを手軽に取り入れることができる使いやすいライブラリなのでご参考までに。
