こんにちは。すずきです。
この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。
- パララックスを手軽に実装したい
- 複雑なjsコードは苦手
- レスポンシブ対応が難しい
- 画像だけでなく、テキストなども柔軟にパララックスしたい
rellax.jsとは
![](https://web-note.org/wp-content/uploads/2023/12/screencapture-dixonandmoe-rellax-2023-12-15-13_12_44-800x450.png)
rellax.jsは、パララックス(視差効果)を簡単に実装できるJavaScriptライブラリです。
公式サイトを見ていただけると、具体的なイメージがつきやすいかと思います。
![](https://dixonandmoe.com/assets/images/vanilla-javascript-parallax-library-e6cc0fb1.jpg)
要素が動くことでユーザーに興味を持ってもらい、サイトのUXを向上させることができます。
パララックスプラグインの中でもrellax.jsをおすすめする理由は以下の4つです。
- バニラJavaScriptライブラリで作られており、jQueryなど不要
- オプションが充実しており、要素の軸や速度を指定できる
- ブレイクポイント毎の指定が可能
- ファイルが軽量
relax.jsの実装方法
ここからはrellax.jsの実装方法を解説します。
rellax.jsの読み込み
まずはrellax.jsを読み込みます。
公式からダウンロードする方法と、CDN経由で読み込む方法とがあります。
CDN経由で読み込む場合は以下のコードで読み込むことができます。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/rellax/1.0.0/rellax.min.js”></script>
JavaScriptの設定
次にrellax.jsを初期化するために、JavaScript
ファイルで以下のコードを記述します。
var rellax = new Rellax(‘.js-rellax');
.js-rellax
は、適用したい要素のクラス名を指定しています。
HTMLのマークアップ
最後にrellax.jsを適用する要素にクラス名js-rellax
とdata-rellax-speed
属性を追加します。
<div class="rellax" data-rellax-speed="2"> <!-- 要素の中身 --> </div>
テキストや写真、アイコンなど、なんでも対応してくれます。data-rellax-speed
属性は、スクロール速度の倍率を指定するもので、値が大きいほど遅れて追従するようになります。
オプションの設定
rellax.jsは様々なオプションを提供しています。
以下は、いくつかの一般的なオプションの例です。
var rellax = new Rellax(".rellax", {
speed: -2, // スクロール速度の倍率 //
center: true, // 要素を中央に配置 //
wrapper: null, //スクロールされる要素の親要素 //
round: true, // 位置を整数に丸める //
vertical: true, // 縦方向のスクロールを有効にする //
horizontal: false, // 横方向のスクロールを無効にする //
});
speed | スクロール速度の倍率 初期値:-2 公式では-10 から + 10 の間での指定を勧めている |
center | 要素を中央に配置 初期値:false |
wrapper | スクロールされる要素の親要素 |
round | 位置を整数に丸める 初期値:false |
vertical | 縦方向のスクロールを有効にする 初期値:false |
horizontal | 横方向のスクロールを無効にする 初期値:true |
初期化の際に一括で設定することもできますし、個別に指定することもできます。
個別指定する場合は以下のように属性を追加します。
<div class="rellax" data-rellax-percentage="0.5"> <!-- 要素の中身 --> </div>
レスポンシブ対応
rellax.jsでは、3つのブレイクポイントを指定することができます。モバイル・タブレット・デスクトップのそれぞれの解像度を指定することで、要素に設定したそれぞれの速度が適応されます。
以下のコードが初期値で、数値を変えることでブレイクポイントを変更することができます。
var rellax = new Rellax(".rellax", {
breakpoints: [576, 768, 1201],
});
あとはHTML
に属性を追加すれば、ブレイクポイント毎に動きを変えることができます。
<div class="rellax-target"
data-rellax-speed="1"
data-rellax-mobile-speed="0.4"
data-rellax-tablet-speed="0.7"
data-rellax-desktop-speed="1"
>
<!-- 要素の中身 -->
</div>
data-rellax-speed | デフォルトのスピード(スピードの指定がない時) |
data-rellax-mobile-speed | モバイルのときのスピード(今回は576px以上の時) |
data-rellax-tablet-speed | タブレットのときのスピード(今回は768px以上の時) |
data-rellax-desktop-speed | PCのときのスピード(今回は1201px以上の時) |
終わりに
以上がrelllax.jsの使い方でした。
このライブラリを使用することで、簡単にパララックス効果を実装することができます。
また、オプションも豊富なので追加のcssやJavaScriptをほとんど書くことなく、カスタマイズすることが可能です。
私がよく使うプラグインを以下記事でまとめています。
よければ参考にしてください。
![](https://web-note.org/wp-content/uploads/2023/12/thumbnail_best-plugins-640x396.jpg)