2019.11.26

簡単にパララックスを実装できるRellax.JSの使い方

以前にスマホ対応！パララックスサイトの作り方という記事でパララックスを実装できる「ScrollTween.js」というライブラリを当サイトで紹介していますが、今回はRellax.JSというライブラリの使い方をサクッと紹介したいと思います。

Rellax.JSとは？

Rellax.JSは、jQueryに依存しないパララックスを実装できるためのJavaScriptライブラリです。

こちらからデモが見れます。
https://dixonandmoe.com/rellax/

Git Hub上の公式ページ。
https://github.com/dixonandmoe/rellax

Rellax.JSの導入

npmでのインストールはこちら。

npm install rellax --save

直のファイルはこちらからコピーして利用します。
https://github.com/dixonandmoe/rellax/blob/master/rellax.min.js

基本的な使い方

ポイント①

「class=”rellax”」のようにクラス名を入力します。また、「data-rellax-speed=”-5″」のようにカスタムデータ属性を記述することでスクロールのスピードを設定することができます。スピードは「-10 から 10」までの間でスピードを指定することができます。

ポイント②

Rellax.JSファイルの読み込みとポイント①で指定したclassを指定します。

<div class="bg">
    <!-- ポイント① -->
    <h1 class="rellax" data-rellax-speed="-5">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4">Programming</h2>
</div>

<!-- ポイント② -->
<script src="rellax.min.js"></script>
<script>
    var rellax = new Rellax('.rellax');
</script>

背景を視差スクロールする

下記のようにCSSに「background-attachment: fixed;」を指定すると背景そのものにもより視差スクロールを強調する設定にすることもできます。

<div class="bg rellax" data-rellax-speed="7">
    <h1 class="rellax" data-rellax-speed="-5">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4">Programming</h2>
</div>
<script src="rellax.min.js"></script>
<script>
    var rellax = new Rellax('.rellax');
</script>

.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 800px;
    background-image: url('img/bg.jpg');
    background-attachment: fixed;
}

Z-index

「data-rellax-zindex=”1″」のようにz-indexの重なり順を指定することもできます。

<div class="bg">
    <h1 class="rellax" data-rellax-zindex="1">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2" data-rellax-zindex="2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1" data-rellax-zindex="3">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4" data-rellax-zindex="4">Programming</h2>
</div>

要素の位置情報を取得

要素の位置情報を取得して処理をさせることもできます。

<div class="bg" data-rellax-speed="7">
    <h1 class="rellax_postion" data-rellax-speed="-5">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4">Programming</h2>
</div>

<script>
    // 要素の位置情報を取得
    var rellax = new Rellax('.rellax_postion', {
    callback: function(positions) {
      // callback every position change
      console.log(positions);

      // 要素のY軸が-20より大きくなったら処理というサンプル
      if(positions.y > -20) {
          console.log("hoge = " + positions.y);
      }
    }
  });
</script>