Rellax.jsを使って
簡単パララックス

2019.05.30 2024.01.12

TIPS

inoue

今回は簡単にパララックスを実装できる「Rellax.js」の使い方をメモ。
公式サイトはこちら

DEMO

簡単なデモを作りました。
Rellax.jsのDEMO

Rellax.jsを使う準備

まずはyarnでインストール

$ yarn add -D rellax

そして読み込みます。
僕はwebpackでバンドルして使いますが、そのまま読み込むのもCDN使うのもお好みで。
今回は使い方の説明なのでCDN（ver1.9.1）を読み込むことにします。
<body>の一番下に以下のタグを設置します

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>

これでRellax.jsを使う準備が整いました。

Rellax.jsの実装

さっそく実装してみましょう。

まずはJSを書きます。先ほど読み込んだタグのすぐ下に追記します。

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

「.js-rellax」というclassのついた要素に対してRellax.jsを適用します。
とりあえず動かすだけならJSはこれだけでOK。

次にHTMLを書きます。

<div class="js-rellax">
<!--パララックスさせたい要素をここに書く-->
</div>

はい、できました！
たったこれだけでパララックス完成！簡単！

Rellax.js - 応用編 -

ここまでの工程ではDEMOのようにはなりません。
Rellax.jsには簡単にカスタマイズできる機能が備わっていますので、それを使っていきます。

まずスピードの調整。「data-rellax-speed」属性を付けて調整します。
何も指定しなければdefaultは-2になっているみたいです。公式のオススメは-10 から 10までの間とのこと。

<div class="js-rellax" data-rellax-speed="3"></div>

次にパーセンテージの調整は「data-rellax-percentage」属性。
0.5にすると画面中央センタリングできる模様。

<div class="js-rellax" data-rellax-speed="3" data-rellax-percentage="0.5"></div>

スピードの値が正（+）の場合は、
数値を大きくすると下に、
小さくすると上に少しずらすことができます。
スピードの値が負（−）の場合は逆に
数値を大きくすると上に、
小さくすると下にずれます。

こちらに関しては文章からだと想像しにくいと思うので、実際に適用してみるとわかると思います。

あとRellax.jsを適用した要素同士の重なり順を「data-rellax-zindex」で指定できます。defaultは0です。

<div class="js-rellax" data-rellax-speed="3" data-rellax-percentage="0.5" data-rellax-zindex="5"></div>

JSの方では引数にオプションを一括で指定できます。

<script>
    var rellax = new Rellax('.js-rellax', {
    speed: -2, //速度
    center: true, //センタリング
    wrapper: null, //スクロールを監視する要素 指定しない場合はbodyになる
    round: true, //公式に説明がない・・・若干、止まるときにイーズが効くような？
    vertical: true, //縦パララックス
    horizontal: false //横パララックス
  });
</script>