【jquery非依存】rellax.jsでパララックスを実装する方法

ひぐま
ひぐま

rellax.jsとは？

こんにちは、ひぐまです。

rellax.jsとは、簡単に要素に対してパララックス効果をつけることができるjsプラグインです。

公式サイトはこちらでご確認ください

rellax.js公式サイト

実は以前にも同じようなパララックスのプラグインを紹介しており、当時の記事の言葉を借りてパララックスがピンとこない人に再び説明いたしますと、パララックスとは、英語で「視差」のことを差します。
複数重ねた要素に動かすスピードの差をつけてあげることで、遠近感や立体感を生み出す表現方法で、 前述した視覚効果で見る側に強いインパクトを与えられるためよく用いられている手法です。

ただ、今回ご紹介するrellax.jsは以前紹介したluxy.jsと少し仕組みが違い、こちらはIE11で閲覧時スクロールした際にガタつくという欠点があります。
これは、IEブラウザが独自にもっているスムーススクロールが原因で起こるのですが、luxy.jsの場合、慣性スクロールがもれなくついてくるため、その現象がみられません。

ただ、そこを抜いてしまえば、rellax.jsもとても使いやすく導入も簡単なプラグインです！
本年6月にはIE11のサポートも終了(※Windows10 通常版)することが決まっているため、IE非対応で進んでいるサイトも多いのではないでしょうか？

そこで今回は、rellax.jsでのパララックスの導入方法をご紹介しようと思います。

luxy.jsの記事はこちら↓

【jquery非依存】Luxy.jsで簡単にパララックスと慣性スクロールを実装する

スクリプトを読み込む

npmで読み込む場合

npm install rellax --save

scriptタグで読み込む場合

公式サイトから飛べるGitHubにアクセスし、rellax.jsもしくは軽量版のrellax.min.jsをダウンロードしてきます。

GitHub

プラグインをダウンロードしたら、HTMLのhead内に設置します。

  <script type="text/javascript" src="js/rellax/rellax.min.js" charset="utf-8"></script>

続いて、下記のようにスクリプトを書き記します。

<script charset="utf-8">
window.onload = function() {
   var rellax = new Rellax('.rellax');
}
</script>

スクリプトについてはたったこれだけの記述で読み込みは完了です。

HTML

今回使用するHTMLはこんな感じ

<main>
    <div>
        <p class="rellax n01" data-rellax-speed="-6" data-rellax-zindex="4">so slowly</p>
        <p class="rellax n02" data-rellax-speed="-8" data-rellax-zindex="3">super slowly</p>
        <p class="rellax n03" data-rellax-speed="5" data-rellax-zindex="2">fast</p>
        <p class="rellax n04" data-rellax-speed="-3" data-rellax-zindex="1">slow</p>
    </div>
    <p class="rellax n05" data-rellax-speed="8" data-rellax-zindex="5">rellax.js</p>
</main>

パララックスを追加したい要素に、先ほど指定しているclass="rellax"を付けてあげます。

これだけでもパララックスが反映されますが、オプションでdata-rellax-speed="〇〇"をつけて、-10から10までの間の数値で各要素のスピードを調整できます。
数値が高ければ早く通り過ぎてゆき、低ければゆっくりと通り過ぎます。

また、data-rellax-zindex="〇〇"では、重ね順の調整ができます。数値が大きいほど要素が重なる場合に重ね順が上になり、数値が小さいと下にもぐります。
z-indexのようなものだと思ってください。

CSS

main div{ width:600px; height:300vh; margin:0 auto; padding:0 15px; }
.rellax{ margin-top:100vh; display:inline-block; text-align:center; }
.rellax.n01{ padding:20px; border-radius:50%; background:#FCD7A1;}
.rellax.n02{ padding:40px; border-radius:50%; background:#A59ACA; }
.rellax.n03{ padding:70px; border-radius:50%; background:#D7E7AF; }
.rellax.n04{ padding:150px; border-radius:50%; background:#9FD9F6; }
.rellax.n05{ width:100%; padding:60px 0; color:#F5B090; font-size:80px; font-weight:900; background:#FFF9B1;  }

CSSはこんな感じです。

デモではスクロールを長めにとって検証するためにheight:300vh(画面の高さ3つ分)とか、margin-top:100vh(画面の高さ1つ分)などとってます。

動きはデモをご覧ください。

デモ

どうでしたか？
このように、プラグインの導入はとても簡単ですので、皆さんも是非お試しください！

関連記事