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

公開日: 2025.07.12
最終更新日: 2026.07.17

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

Webサイトに奥行きや動きを与える手法として、パララックス効果と慣性スクロールは根強い人気があります。うまく使えば、スクロールするだけで印象に残る体験を作れます。

この記事では、軽量で扱いやすいパララックスライブラリ「Rellax.js」と、なめらかな慣性スクロールを実現する「Lenis」を組み合わせて、奥行きのあるスクロール演出を実装する方法を解説します。導入から初期化、オプション、よくあるつまずきの対処までまとめました。

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

使用ライブラリの概要

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");

LenisはrequestAnimationFrameで毎フレーム更新する必要があるため、raf関数でループさせます。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();
    });
});

このコードでは、各パララックス要素の親要素を基準に効果をスタートさせています。relativeToWrapperとwrapperで基準を親要素に切り替えることで、Y軸方向のずれを解決できます。