rellax.jsでパララックス効果を実現！JSライブラリ 使用方法・オプションを調査 実際の動作確認

2021.08.14

スクロールによって前の画像に後の画像が被っていったり、要素によって上がってくる速度が異なっていたり、ということがあります。
これを実現できそうなrellax.jsの使用方法やオプションを調べ、codepenで実装してみました。

また、rellax.jsと同じようなライブラリ、Simple Parallax Scrollingも選択肢の一つとなると思いますので、参考までに。

Simple Parallax Scrolling JSライブラリでパララックス効果 使用方法、オプション、動作を確認
パララックス効果を実現するJSライブラリSimple Parallax Scrolling について使用方法やオプションについてまとめてみました。 実際にcodepenでご確認いただけます。 都度jQueryでコードを書くより随分と楽に。
b-moon.net
2021.08.14

rellax.jsとは

rellax.js
画像は公式のデモページを引用させていただいております。

公式ページ

使い方についてこれさえ押さえておけば十分だろうというものを記載しておりますが、より詳細を知りたい場合は公式ページをご参照ください。
英語のページは辛い方もいっらしゃると思いますが（筆者！）、Google翻訳を使うとストレスが減ると思います。

特徴

要素の出現スピードの調整・要素のz-index・レスポンシブのブレイクポイントの設定が可能です。
要素の出現元（左右上下から）・表示前の透明度・大きさの設定はないようですので、ふわっとフェードインさせるというツールではなさそうです。

難易度について、最初の導入の段階は易しいと思います。scriptが少ないのでHTMLファイルに記述できてしまいますし、オプションはHTMLファイルのタグ内に記述します。

但し、speed（要素の出現速度）の調整は、何度も試行錯誤しながら進めていく必要があります。

使い方の概要

①ローカルにダウンロードしてインストールも可能なようですが、CDNで読み込んでみます。

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

②JavaScriptで適用するクラスを指定とありますが、この後登場するメソッド等を追加しても記述量は少ないため、HTMLファイルにscriptを直書きしています。

<script>var rellax = new Rellax('.rellax');</script>

主なオプション・メソッド

省略しているオプションもありますので、ご了承ください。
最初のspeedの設定だけでも、動きます。

オプション/
メソッド		説明及び記述例デフォルト値
speed数値が大きくなる程、スピードが速い
負の値は通常スクロールより移動が遅い
-10 〜 + 10		-2
breakpoints
端末毎の指定		レスポンシブに対応した速度属性使用可
例）data-rellax-mobile-speed=”3″
その場合はscriptでブレイクポイントの配列を作成
z-index要素の重ね順
Horizontal Parallax水平方向にスクロールするWEBサイトを対象
有効にするには、scripを追記
<script>
  var rellax = new Rellax(‘.rellax’, {
    horizontal:true
});
</script>		無効
Custom Wrapper視差要素の位置の監視要素の設定
<script>
  var rellax = new Rellax(‘.rellax’, {
    wrapper:’.custom-element’
});
</script>		body
refreshパララックスの設定を破棄して再度設定
繰り返すかという意味ではないようですので、高度なこことを実現しようとしない限りは、特に気にしなくてもよいかと思います。
<script>
  var rellax = new Rellax(‘.rellax’);
  rellax.refresh();
</script>
destroyパララックスの設定を破棄
繰り返さないという意味ではないようです。高度な…（以下、上段と同じ）
<script>
  var rellax = new Rellax(‘.rellax’);
  rellax.destroy();
</script>

要素（box）の横幅の大きさをそれぞれ50px、横並べにし CODEPEN で実装と確認

「Run Pen」をクリックしてください。

まずは要素を重ねず、boxを横並べにし上がってくる速度を見てみます。
まだ、画面には何も見えていないと思いますので、 CODEPEN 内をゆっくりスクロールしてみてください。

各boxを囲むグレーのboxにはスクロールによるspeedを設定していませんので、これが標準速度です。
黄色のboxのspeedが1、赤色のboxのspeedが-1で、標準速度のグレーのBOXの差が分かりやすいと思います。
speedを-3とした青色のboxはなかなか登場してくれません。

See the Pen Rellax side by blue moon (@blue-moon) on CodePen.

要素（box）の横幅の大きさをそれぞれ50px、少し重ね縦並べにし CODEPEN で実装と確認

次は各boxをflex-direction: column; で縦に並べ、少しずつ重ね、z-indexオプションを使ってみます。

See the Pen Rellax verticall by blue moon (@blue-moon) on CodePen.

要素が重なっていくことは分かりましたが、この場合、前の要素に対してz-indexは効いていないことが分かりました。この方法は間違っているのでしょうか。

要素（画像を挿入）の横幅の大きさをそれぞれ100％とした場合で CODEPENで実装と確認

前項の結果はイマイチでしたが、最終目的のスクロールによって全画面幅にした要素が重なっていく場合、z-indexの効果とともに動きを見てみます。

最初の画像は、rellaxクラスは付与せず（スクロールで動かさない）、下記の通り固定しています。こうすることで、下の画像が上がってくる時に隙間から垣間見えるようになります。

.box:first-child {
    position: fixed;
    top: 0;
    z-index: -1;
}

See the Pen Rellax_img by blue moon (@blue-moon) on CodePen.

今回は、画像の大きさ・中央配置・アスペクト比等の調整は省略しております。

z-indexよりspeedで速く出現してきた要素の方が優先で、追いついた要素は前の要素の上に自然と被るようになっています。
z-indexは、次の要素が出現している場合に限って、前の要素に対して効いていることが分かりました。ほんの一瞬で分かりづらいですが、Pタグの「BEACH」が出現する所に注目してください。前後の要素に挟まれています。

まとめ

最初の特徴でも述べましたが、導入は簡単です。要素の高さや幅が絶対値で設定してある場合は苦労しなさそうです。
但し、画面幅や要素の高さによってもスクロールに対するspeedも変わってくるようで、一筋縄にはいかないところもあります。
speedの数値の調整はなかなか思い通りにいきませんでしたが、試行錯誤するうちになんとなく感触がつかめると思います。

模範解答にはなりませんでしたが、今回の目的である、このライブラリの特徴をつかんで画像を被せていくということが実現できたので、勉強になりました。

タイトルとURLをコピーしました