サクサク！Relax.jsでパララックスをつける方法
JQuery不要かつ、 容量の軽いjavascriptを読み込めば使えるライブラリで、
パララックスをつける方法をメモしました。
https://dixonandmoe.com/rellax/ 使うための前準備
</body>の直前に、rellax.jsの読み込みを追加します。サイトからjsダウンロードするのもいいけれど、下記CDNを加えるのが一番ラクそう。
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>前準備としては、このファイルを読み込むだけでOKです！
基本の使い方
Javascriptを１行、1の<script >で読み込んだ後ろにパララックスをつけたいクラス名を定義します。
<script>
// (‘.js-rellax’);は好きなクラス名でOK!
var rellax = new Rellax(‘.js-rellax’);
</script>
htmlのパララックス効果をつけたい箇所に先ほどのクラス名「js-rellax」を追加します。
<div class="js-rellax">
parallax sample
</div>
このようにすると、rellax-jsのデフォルトのパララックス設定が-2のスピードになっているので、
指定した部分が若干ゆっくり出てきます。
class名に設定を追加する場合
1スピードを変える
該当箇所のhtml要素のクラス名として、data-rellax-speedを追加し、数値を-10～10の範囲で設定することで、速さを調整することが可能です。
<div class="js-rellax" data-rellax-speed=“-7”>
parallax sample
</div>
<div class="js-rellax" data-rellax-speed=“10”>
parallax sample
</div>
２要素をセンタリングする
1と同様に、クラス名としてdata-rellax-percentageの数値を０.５にする設定を追加します。
<div class="js-rellax" data-rellax-percentage="0.5">
parallax sample
</div>
3 要素の重なり順を変更する
デフォルトだとz-indexが0になっていますが、
data-rellax-zindexの数値を変えることで重なりを調節可能です。
javascriptに設定を追加する場合
cssクラス名に追加する以外に、Javascriptの設定からでも、スピードやセンタリングなどのパララックス設定のカスタマイズが可能です。
<script>
var rellax = new Rellax(".js-rellax", {
speed: -5,
center: false,
wrapper: null,
horizontal: true,
});
</script>
| speed | -10〜10の範囲で、速さを調節します。 |
| center | trueにするとセンタリングできます。 |
| wrapper | 初期値だとbodyのスクロールに応じてパララックス要素が動くのが、’.〇〇’とすると、〇〇のクラス名の要素の動きに応じてエレメントが動きます。 |
| horizontal | trueにすると、水平スクロールで表示させる設定になります。その際は、垂直のスクロールを不可にするため、vertical:false;も追加が必要になります。 |
そのほか
パララックスを終わらせたい時は、Destroy要素を追加すれば、終了してもともとの要素が位置していた場所に戻すことが可能です。
<script>
var rellax = new Rellax('.js-rellax');
rellax.destroy();
</script>
