【Rellax.js×Lenis】パララックス実装は遠近感と慣性スクロールがポイント

パララックス効果（視差効果）は、要素の位置関係や動く方向などによって、遠近感を表現する手法です。

最近のWebサイトでは、よく見かける表現方法ですよね。

とはいえ実装には少しコツが必要なので、「以前チャレンジしたけど、うまくできなかった」という人もいるかと思います。

ということでこの記事では、パララックス効果を簡単に導入できるJSライブラリの導入方法と、パララックス効果を表現する際のポイントについてまとめてみたいと思います。

パララックス効果って？

簡単におさらいですが、パララックス効果とは要素の位置関係を表現することで、Webページに遠近感を持たせる手法のことです。

たとえば、以下のようなサイトが分かりやすいと思います。

D'RENTY INC.

ARC’TERYX SHINJUKU | アークテリクス 新宿ブランドストア

Atle DELTA（アトレデルタ）

要素の重なりやスクロール速度などによって見る人からの要素の位置（遠い・近い）を表現することで、デザインに奥行きを出すことができるわけですね。

パララックス効果のポイントは遠近感×慣性スクロール

パララックス効果を表現するポイントは、遠近感の演出と慣性スクロールです。

電車に乗って窓の外を見ているとき、遠くの景色はゆっくりなのに、近くにある建物はものすごいスピードで通り過ぎていきますよね？

観察者は同じスピードで動いているのに、遠くのものはゆっくり、近くのものは速く動いている（ように見える）わけです。

パララックス効果で遠近感を表現するには、ここに留意して実装するのがポイントです。

次に、慣性スクロール。

慣性スクロールとは、画面をスクロールさせたときに、指を離しても画面がオーバーランするような動きのことです。

パララックス効果と合わせて慣性スクロールを実装することで、より視覚的に訴えかける表現ができるようになります。

以下の2つのサイトを見比べてみてください。

D'RENTY INC.

はばけん｜京都・小倉駅から徒歩1分の京赤地鶏を愉しむ炭火焼き鳥店

どちらもパララックス効果を実装していますが、上は慣性スクロールあり、下は慣性スクロールなしです。

上のサイトの方がパララックス効果の動きが、より分かりやすいのが見て取れると思います。

もちろん何でもかんでも慣性スクロールを入れればいいというわけではありませんが、パララックス効果をより引き立たせたいという場合には、パララックス×慣性スクロールの合わせ技がおすすめです。

パララックスを簡単に導入できるJSライブラリ

パララックス効果を表現するには、簡単に導入できるJSライブラリを利用するのがおすすめです。

ここではパララックスの代表的なライブラリである『Rellax.js』と、こちらも慣性スクロールの代表的ライブラリ『Lenis』の導入手順について解説していきます。

Rellax.jsの使い方

まずはRellax.jsを導入していきます。

Vanilla Javascript Parallax Library — Rellax

Rellax.jsのインストール

インストールには、以下の3つの方法があります。

• npm

• ダウンロード

• CDN

npmの場合

コマンドライン（Win:コマンドプロンプト／Mac:ターミナル）で以下を実行してください。

npm install rellax --save

インストールできたら、HTMLファイルに以下を記述して「rellax.min.js」を読み込みます。

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

ダウンロードする場合

Rellax.jsのGitHubからファイルをダウンロードし、「rellax.min.js」をプロジェクト内の任意のフォルダに配置してください。

配置できたら、HTMLファイルから読み込みます。

ここでは例として、「js」という名前のフォルダに入れた「rellax.min.js」を読み込んでいます。

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

CDNの場合

HTMLに以下を記述します。

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

インストールできたら、Rellax.jsを使いたいページのHTMLファイル、もしくはプロジェクト内に別途用意したjsファイルに以下を記述します。

let rellax = new Rellax('.rellax');

以上でインストールは完了です。

「rellax」というクラスのついた要素に、パララックス効果をつけることができるようになりました。

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

Rellax.jsのオプション

Rellax.jsにはいくつかオプションが用意されていますが、簡単に導入できて使用頻度も高いのが以下の3つです。

• data-rellax-speed

• data-rellax-zindex

• data-rellax-percentage

data-rellax-speed

スクロールしたときに要素が動くスピードを指定します。
-10〜10までの値を指定でき、マイナス値だと下方向、プラス値だと上方向へ移動します。

data-rellax-zindex

要素の重なり順を指定します。
値が大きいほど上（手前）になります。CSSのz-indexと同じ要領ですね。

data-rellax-percentage

Rellax.jsではbody要素を基準にパララックス要素の位置が決まるため、パララックスさせたい要素が画面上に現れていないうちから動き始めてしまいます。

それを防ぐのがこのオプションで、これを指定しておくことで要素が画面に現れたタイミングで動き出してくれるようになります。

「0.5」が画面中央なので、とりあえず「0.5」と指定しておき、必要に応じて微調整する感じでいいと思います。

data-rellax-percentageを一括で指定したい場合は、JSに以下のように書くと同じことができます。

let rellax = new Rellax('.rellax', {
	center:true
});

パララックス要素に以上のオプションを指定すると、以下のようになります。

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

Lenisの使い方

次にLenisのインストールです。
Rellax.jsと同じく、以下の3つの方法があります。

• npm

• ダウンロード

• CDN

npmの場合

コマンドラインで以下を実行します。

npm i lenis

その後、プロジェクト内のJSファイルからLenisをインポートします。

import Lenis from 'lenis'

ダウンロードする場合

LenisのGitHubからファイルをダウンロードします。

「lenis.min.js」をプロジェクト内の任意のフォルダに配置し、HTMLファイルから読み込んでください。

<script src="js/lenis.min.js" defer></script>

CDNの場合

HTMLに以下を記述します。

<script src="https://unpkg.com/lenis@1.1.19/dist/lenis.min.js"></script> 

インストールできたら、Lenisを使いたいページのHTMLファイル、もしくはプロジェクト内に別途用意したjsファイルに以下を記述します。

const lenis = new Lenis();
function raf(time) {
	lenis.raf(time);
	requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

そのほか細かい設定もできるようですが、基本的にはこれだけで慣性スクロールできるようになります。

パララックス効果で遠近感を出すコツ

以上でRellax.jsとLenisを導入できました。

これでWebページにパララックス効果（＋慣性スクロール）を付けることができたわけですが、先ほども言ったようにパララックス実装には少しコツがあります。

以下のようなことを留意しながら、各オプションを設定したり、CSSを調整したりします。

• 近いものは大きく見える

• 遠いものは小さく見える

• 近いものは速く動く

• 遠いものはゆっくり動く

• 焦点の合わないものはぼやけて見える

先ほども紹介した以下のサイトでは、上記のポイントをうまく表現して遠近感を演出しています。

D'RENTY INC.

遠くにある要素は小さくぼやけ、また焦点より近くにある要素もぼやけています。

そして手前にある要素ほどスクロール速度が速く、遠くにある要素ほどスクロール速度をゆっくりに設定されています。

これらを踏まえて、実際に各オプションを設定してみると以下のようになります。

<!-- 手前の要素（速い・近い） -->
<div class="rellax" data-rellax-speed="6" data-rellax-zindex="1" data-rellax-percentage="0.5"></div>

<!-- 遠くにある要素（遅い・遠い） -->
<div class="rellax" data-rellax-speed="3" data-rellax-zindex="0" data-rellax-percentage="0.5"></div>

2つの要素の位置関係を考えつつ、data-rellax-speedとdata-rellax-zindexの値を調整してみてください。

パララックスがうまく実装できないときは

パララックス効果の実装は、「チャレンジしたけどできなかった」「思ったように動かせない」というように、苦手意識を持っている人が少なくないようです。

でもこれは、先ほども言ったようにパララックス要素の位置がbody要素を基準に決まることが原因であることが多いです。

たとえばPCとスマホでサイトを見た場合、同じWebページでもbody要素のサイズは変わりますよね。

そのためパララックス要素の位置が想定しているよりズレてしまったり、いいタイミングで画面上に出現してくれなかったりするわけです。

これを解決する手っ取り早い方法は、基準となる要素をbodyではなく、パララックス要素の親要素にしてしまうことです。

そうすれば誤差を最小限に抑えることができ、位置やタイミングもイメージと近い形で実装することができるようになります。

Rellax.jsの「wrapper」というオプションを利用する方法もありますが、以下のページで紹介されていた方法がもっとも簡単かつ便利だと思います。

Vanilla JSのパララックス実装ライブラリ「Rellax」が使いやすくなるoptional設定 - Qiita

HTMLファイルもしくはプロジェクト内のJSファイルに以下を追記します。

const rellaxin = document.querySelectorAll(".rellax");
rellaxin.forEach(el => {
	const rellax = new Rellax(el, {
		relativeToWrapper: true,
		wrapper: el.parentElement
	});
	window.addEventListener("scroll", () => {
		rellax.refresh();
	});
});

1行目の「.rellax」はパララックス要素につけるクラスです。

これによって「rellax」というクラスのついたパララックス要素は、その直接の親要素を基準に動作するようになります。

要素ごとにいちいち親要素を指定する必要がないのがスマートですよね。

まとめ

以上、Rellax.jsとLenisを利用したパララックス効果の導入と実装のポイントでした。

パララックス効果はわりと手軽にリッチな雰囲気を出せるので、機会があれば是非チャレンジしてみてください。

ただ、あまり過度な表現にするとサイトが使いづらくなったり、重要な情報が伝わりづらくなったりというデメリットもあります。

あくまでも快適な範囲で、サイトの目的を見失わないようにまとめることが大切になります。

役に立ったと思ったらスキ・フォローお願いします！
ご質問がある場合やソースコードの記述ミスを見つけたときは、コメントで教えてください。