Bookmark今回は簡単にパララックスを実装できる「Rellax.js」の使い方をメモ。-まとめDEMO簡単なデモを作りました。rellaxそして読み込みます。僕はwebpackでバンドルして使いますが、そのまま読み込むのもCDN使うのもお好みで。今回は使い方の説明なのでCDN(ver1.9.1)を読み込むことにします。src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>これでRellax.jsを使う準備が整いました。Rellax.jsの実装さっそく実装してみましょう。先ほど読み込んだタグのすぐ下に追記します。Rellax('.js-rellax');</script>「.js-rellax」というclassのついた要素に対してRellax.jsを適用します。動かすだけならJSはこれだけでOK。次にHTMLを書きます。-ここまでの工程ではDEMOのようにはなりません。Rellax.jsには簡単にカスタマイズできる機能が備わっていますので、それを使っていきます。「data-rellax-speed」属性を付けて調整します。何も指定しなければdefaultは-2になっているみたいです。10までの間とのこと。data-rellax-speed="3"></div>次にパーセンテージの調整は「data-rellax-percentage」属性。0.5にすると画面中央センタリングできる模様。小さくすると上に少しずらすことができます。小さくすると下にずれます。こちらに関しては文章からだと想像しにくいと思うので、実際に適用してみるとわかると思います。あとRellax.jsを適用した要素同士の重なり順を「data-rellax-zindex」で指定できます。defaultは0です。data-rellax-zindex="5"></div>JSの方では引数にオプションを一括で指定できます。});</script>ここまでの設定を応用すれば、あとはCSS次第でDEMOと同じものが作れます。Rellax.jsのDEMOまとめ今回はRellax.jsで簡単にパララックスを実装する方法を紹介しました。スマホでもあまり重くならずに動くのでとてもオススメです。他にも横スクロールの設定やコールバックも簡単に使えるので、使い所があれば今後試してみたいと思います。