サクサク!Relax.jsでパララックスをつける方法

JQuery不要かつ、 容量の軽いjavascriptを読み込めば使えるライブラリで、
パララックスをつける方法をメモ。

  1. 使うための前準備
  2. 基本の使い方
  3. クラス名に設定を追加する場合
  4. javascriptに設定を追加する場合
  5. そのほか

1 使うための前準備

</body>の直前に、rellax.jsの読み込みを追加します。サイトからjsダウンロードするのもいいけれど、下記CDNを加えるのが一番ラクそう。

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>

前準備としては、このファイルを読み込むだけでOKです!

2 基本の使い方

Javascriptを1行、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のスピードになっているので、
指定した部分が若干ゆっくり出てきます。

3 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>

2要素をセンタリングする

1と同様に、クラス名としてdata-rellax-percentageの数値を0.5にする設定を追加します。

<div class="js-rellax" data-rellax-percentage="0.5">
        parallax sample
</div>

3 要素の重なり順を変更する

デフォルトだとz-indexが0になっていますが、
data-rellax-zindexの数値を変えることで重なりを調節可能です。

4 javascriptに設定を追加する場合

cssクラス名に追加する以外に、Javascriptの設定からでも、スピードやセンタリングなどのパララックス設定のカスタマイズが可能です。

<script>
  var rellax = new Rellax(".js-rellax", {
    speed: -5,
    center: false,
    wrapper: null,
    horizontal: true,
  });
</script>
speed-10〜10の範囲で、速さを調節します。
centertrueにするとセンタリングできます。
wrapper初期値だとbodyのスクロールに応じてパララックス要素が動くのが、’.〇〇’とすると、〇〇のクラス名の要素の動きに応じてエレメントが動きます。
horizontaltrueにすると、水平スクロールで表示させる設定になります。その際は、垂直のスクロールを不可にするため、vertical:false;も追加が必要になります。

5 そのほか

パララックスを終わらせたい時は、Destroy要素を追加すれば、終了してもともとの要素が位置していた場所に戻すことが可能です。

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