こんにちは。すずきです。
この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。
- パララックスを手軽に実装したい
- 複雑なjsコードは苦手
- レスポンシブ対応が難しい
- 画像だけでなく、テキストなども柔軟にパララックスしたい
rellax.jsとは
rellax.jsは、パララックス（視差効果）を簡単に実装できるJavaScriptライブラリです。
公式サイトを見ていただけると、具体的なイメージがつきやすいかと思います。
要素が動くことでユーザーに興味を持ってもらい、サイトの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をほとんど書くことなく、カスタマイズすることが可能です。
私がよく使うプラグインを以下記事でまとめています。
よければ参考にしてください。
