2025.07.12(Sat)

Web制作

Rellax.jsとLenis.jsを使ってパララックスと慣性スクロールを実装する方法

1 はじめに
2 使用ライブラリの概要
- 2.1 Rellax.jsとは？
- 2.2 Lenisとは？
3 実装方法
4 Rellax.jsで使用できるオプション
- 4.1 HTML属性で使えるカスタムデータ属性
- 4.2 初期化するときに一括指定するオプション
5 パララックス要素がうまく表示されない時は
6 まとめ

はじめに

Webサイトに奥行きや動きを与える手法として、パララックス効果と慣性スクロールは非常に人気があります。

この記事では、軽量で扱いやすいライブラリ Rellax.js と、滑らかなスクロール体験を提供する Lenis.js を組み合わせて、奥行きを感じるスクロール演出を実装する方法を丁寧に解説します。

使用ライブラリの概要

Rellax.jsとは？

Rellax.js は、パララックスの代表的なライブラリで、スクロールに応じて要素の動きを制御します。指定したスピードで要素がスクロールとともに移動し、奥行きのある演出が可能です。

Lenisとは？

Lenis は、慣性スクロールを実現するJavaScriptライブラリです。
スマートフォンやタブレットでも高いパフォーマンスを発揮し、自然なスクロール体験を提供します。

実装方法

必要なライブラリを読み込む

<!-- Lenis -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>

<!-- Rellax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>

HTMLの準備

<body>
	<div class="img-1">
		<img src="sample-img-1.jpg" class="rellax" />
	</div>
	<div class="img-2">
		<img src="sample-img-2.jpg" class="rellax" />
	</div>
	<div class="img-3">
		<img src="sample-img-3.jpg" class="rellax" />
	</div>
</body>

要素に .rellax クラスを指定します。

JavaScriptで初期化する

// Lenis を初期化
const lenis = new Lenis();

function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

// Rellax を初期化
const rellax = new Rellax(".rellax");

Rellax.jsで使用できるオプション

HTML属性で使えるカスタムデータ属性

要素ごとに個別設定できます。

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

属性名	説明
`data-rellax-speed`	スクロール速度（例：`-2`, `1.5`, `0`など）。
`data-rellax-percentage`	`center: true` の時に、表示エリアのどの位置を基準に動かすか（例：`0.5` = 中央）。
`data-rellax-zindex`	CSSの`z-index`の設定。
`data-rellax-horizontal`	この要素だけ横方向の動きを有効/無効に（例：`true`, `false`）。
`data-rellax-vertical`	この要素だけ縦方向の動きを有効/無効に。

初期化するときに一括指定するオプション

const rellax = new Rellax('.rellax', {
  speed: -2,
  center: false,
  wrapper: null,
  round: true,
  vertical: true,
  horizontal: false,
});

オプション名	型	説明
`speed`	`number`	デフォルトのスクロール速度（`data-rellax-speed`がない要素に適用）。
`center`	`boolean`	`true`にすると、スクロール位置が要素の中心になるように調整される。
`wrapper`	`string` or `Element`	スクロール元のラッパー要素。指定しない場合は`window`。
`round`	`boolean`	`true`でパフォーマンス向上のために位置を整数に丸める。
`vertical`	`boolean`	縦方向にパララックス効果をつける。
`horizontal`	`boolean`	横方向にパララックス効果をつける。

パララックス要素がうまく表示されない時は

Rellax.jsを使ってパララックスを実装すると、ページの下の方に配置したパララックス要素がうまく表示されないなどの問題が発生する場合があります。

この問題の原因は、Rellax.jsではbody要素を基準にパララックス効果が開始されるため、パララックスさせたい要素がまだ画面上に現れていないうちから動き始めてしまいます。

そのため、長いページの下の方にパララックス要素を配置した場合、そこに辿り着くまでに要素の位置がずれてしまう事が原因です。

そんな時は「Rellax初期化」部分を下記のコードに差し替えます。

// Rellax を初期化
const rellaxin = document.querySelectorAll(".rellax");
//　それぞれの親要素にrelativeなwrapperを付与
rellaxin.forEach((el) => {
    const rellax = new Rellax(el, {
        relativeToWrapper: true,
        wrapper: el.parentElement,
    });
    // バグfix
    window.addEventListener("scroll", () => {
        // fix to init
        rellax.refresh();
    });
});

このコードによって、指定した複数のパララックス要素の親要素を基準にそれぞれの要素がパララックスの効果をスタートさせる事ができ、Y軸方向のずれを解決できました。

まとめ

Rellax.jsとLenis.jsを併用することで、視覚的に美しく、操作感も快適なスクロール演出を簡単に実装できます。UI/UXにこだわるサイトや、ブランディングを重視するWeb制作に最適です。

参考：https://qiita.com/Dendai-man/items/0f75df618d8d19ac517e

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。