【Rellax.js】でパララックスを実装してみよう #rellax

1. Rellax.jsとは？

「Rellax.js」はjQueryに依存しないJavaScriptパララックスライブラリです。簡単にパララックスを実装することができます。また、JavaScriptファイルも4KBとかなり軽量です。

2. 準備

導入方法は以下の3つ

ダウンロード
npm
cdn

ダウンロードする場合

githubからzipファイルをダウンロードし、解凍してください。
https://github.com/dixonandmoe/rellax

ファイルの中のrellax.jsまたはrellax.min.jsを選び、自分のプロジェクト内に配置してください。jsファイルなどを用意して、そこに入れるのが良いでしょう。

あとはindex.htmlの</body>の直前に読み込んであげればOKです。

<script src="js/rellax.min.js"></script>

npmの場合

ダウンロードするのとほぼ同じです。
以下の一文をコマンドライン上で実行してください。

npm install rellax --save

すると自分のプロジェクト内に以下のものが作成されます。

node_modulesディレクトリ
package-lock.jsonファイル
package.jsonファイル

node_modulesの中に入っているrellax.min.jsをindex.htmlの</body>の直前に読み込んであげればOKです。tabキーを押しながらパスを指定していきましょう。

<script src="node_modules/rellax/rellax.min.js"></script>

cdnの場合

index.htmlの</body>の直前に以下の一文を読み込んであげればOKです。
とても楽ちんですね。

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

3. 基本的な使い方

対象を決めて、それに対してパララックスを実装してあげればOKです。

パララックスしたい要素にクラス名をつける（rellaxとでもしておきます）
パララックスしたい要素に用意された属性をつける（速さなど色々決められます）
rellax.jsを初期化する（使えるようにしてあげます）

実際に例を見ていきましょう。

html：適当にクラスをつけてあげました。

<div class="rellax"></div>

↓
html：data-rellax-speedという速さに関する属性をつけました。

<div class="rellax" data-rellax-speed="4"></div>

js：初期化しました。これだけでOKです。

var rellax = new Rellax('.rellax', {
});

4. オプション

どのようにパララックスさせたいか、オプションで決めていきましょう。

Speed

スピードは-10から10の間で値を設定できます。
data-rellax-speed="値"で設定します。
初期値は-2です。

イメージとしては競争です。
「よ〜い、どん！」で早い人と、遅い人と、反対側に走っちゃった人がいるって感じです。要素を配置した位置を基準にどのような速さで、どの方向で動くかを決めるイメージです。

<div class="rellax" data-rellax-speed="-3">
  I’m slow and smooth
</div>

<div class="rellax" data-rellax-speed="7">
  I’m super fast!!
</div>

<div class="rellax" data-rellax-speed="-5">
  I’m extra slow and smooth
</div>

レスポンシブにスピードを変える

「この端末で違った速さで設定したいな〜」という時ありますよね。
mobile、tablet、desktopでスピードを変えられます。

<div
  class="rellax"
  data-rellax-speed="7"
  data-rellax-mobile-speed="3"
  data-rellax-tablet-speed="-8"
  data-rellax-desktop-speed="1">
    I parallax at all different speeds depending on your screen width.
</div>

ブレイクポイントの設定はbreakpoints:[スマホ, タブレット, PC]の順に設定すれば大丈夫です。以下はデフォルトで設定されているブレイクポイントです。

//default JS Setting
var rellax = new Rellax('.rellax', {
  breakpoints:[576, 768, 1201]
});

Centering

Centeringとはイメージがちょっとつきづらいかもしれないんですけど、この設定を行うのと行わないのでは要素の動き方が全然違います。

説明が少し難しいのでご了承ください（>_<）

Centeringを設定しない場合は、ページをスクロールするだけで要素が動き始めてしまいます。なので、まだ動き始めて欲しくないって時も動いてしまいます。

Centeringを設定した場合は、ページをスクロールして、その要素の部分までスクロールが達したら、要素が動き始めてくれます。なのでちょうどいいタイミングでのパララックスになりやすいです。

data-rellax-percentage="0.5"でcenteringします。

<div class="rellax" data-rellax-percentage="0.5">
  I’m that default chill speed of "-2" and "centered"
</div>

<div class="rellax" data-rellax-speed="7"
  data-rellax-percentage="0.5">
  I’m super fast!! And super centered!!
</div>

<div class="rellax" data-rellax-speed="-4"
  data-rellax-percentage="0.5">
  I’m extra slow and smooth, and hella centered.
</div>

要素一つずつにcenteringをするのではなくて、グローバルに設定したい場合はmain.jsの方で以下のようにcenter: trueと設定しましょう。

//default JS Setting
var rellax = new Rellax('.rellax', {
  center:true
});

Z-index

z-indexで重なり順を制御しましょう。
z-indexの初期値は0です。

data-rellax-speed="値"で設定します。
値は大きい方が上の方に重なります。

<div class="rellax">
  I’m that default chill speed of "-2" and default   z-index of 0
</div>

<div class="rellax" data-rellax-speed="7"
  data-rellax-zindex="5">
  I’m super fast!! And on top of the previous   element, I'm z-index 5!!
</div>

その他のオプション

Horizontal-parallax

パノラマ的なウェブサイトを作る時は役に立ちます。

//Enable Horizontal Parallax Scrolling
var rellax = new Rellax('.rellax', {
    horizontal:true

    //Disable vertical Parallax Scrolling     
    vertical:false
});

wrapper

初期値だとbodyのスクロールに応じてパララックス要素が動くのですが、特定の要素のクラス名を指定するとその要素の動きに応じてパララックス要素が動きます。

//Set wrapper to .custom-element instead of the body
var rellax = new Rellax('.rellax', {
    wrapper:'.custom-element'
});

5. メソッド

パララックスはスマホなどでは非表示したい場合があります。
その時にdestroyメソッドを使えば要素の位置を元の位置で表示してくれます。

// Start Rellax
var rellax = new Rellax('.rellax');

// End Rellax and reset parallax elements to their original positions
rellax.destroy();

6. 感想

Rellax.jsはとてもシンプルで分かりやすい構造だなと思いました。

ただ単にrellax.jsに用意された属性を与えてあげれば良いわけですから、これほどシンプルなのはありがたいことですよね。

しかも軽量となってくると、簡単なパララックスの実装にはいいかもしれませんね。

ただパララックスを横方向に移動させたい場合は難しいなと思ったので他のパララックスのライブラリは知っておいた方が良さそうです。

【Rellax.js】でパララックスを実装してみよう

目次