rellax.jsを使って、サイトにパララックス（視差効果）を実装しました。
rellax.jsは、ファイルの読み込みと簡単な記述で使用できます。
しかし、対象となる要素の動きを制御しないと、対象の要素が画面外に移動してしまったりと、思ったような動作になりません。
実装自体は簡単にできましたが、いざデザインと合わせると苦労したので、それを備忘録がてら書いていきます。
rellax.jsとは。
まず、rellax.jsについて書いておきます。
rellax.jsは、parallax効果を実装できるjsのプラグインです。
パララックスとは、英語表記で「parallax」となり、「視差効果」を意味します。
Webサイトでは、画面がスクロールするとき、要素の動きに差をつける（バラつかせる）ことで、深さと動きをつける効果です。
一般的には、背景とその上の要素に動きをつけることで、深さ（立体感）を表現することが多いです。
rellax.jsの実装方法。
それでは、rellax.jsの実装方法です。
まず、もととなるファイルを以下の方法で読み込ませます。
どちらの方法でも問題ありません。
上記リストから各リンクへ飛ぶことができます。
私は、ファイルをダウンロードして、直接読み込ませました。
<!-- rellax.js -->
<script src="/js/rellax.min.js"></script>次に、rellax.jsの使用を宣言します。
var rellax = new Rellax('.rellax');これで、実装は完了です。
「.rellax」の部分には、対象となる要素のクラスを指定してあげてください。
クラス名は、任意です。（私は分かりやすく「rellax」としました。）
rellax.jsのオプション設定をして制御する。
さて、ここからが問題です。
実装はできていてもデザインやサイトのイメージに合わせるには調整が必要です。
実際に私が実装したサイトも、対象の要素が想定していた位置に配置されず、デザインとはかけ離れてしまいました。
そこで、ここからはオプションを指定して要素の動きを制御・調整していく方法を書いていきます。
rellax.jsのオプションの設定方法。
設定方法は、２つあります。
- 使用を宣言したjsの記述に追記していく。
- 対象の要素のHTMLに属性として指定する。
上記のオプション設定の違いを簡単に説明すると、対象の要素全体に対して指定するか、個別に指定するか。の違いです。
jsの記述にオプションを追加する。
オプションの記述は、以下のように設定します。
var rellax = new Rellax('.rellax', {
speed: '1',
});上記の記述で「speed: ‘1’,」となっているところが、オプションです。
以下がオプションの一覧です。
| オプション | 内容 | デフォルト値 |
| speed | スピード ( -10 ~ 10 )値でしていする。要素が上下どちらへ動くかを制御する。 | -2 |
| center | 要素を上下でセンタリングする。ウインドウの高さに合わせて、上下中央になるようにスピードを調整する。 | false |
| wrapper | 監視領域を指定する。 | null (body) |
| vertical | Y軸（縦）方向のパララックスを指定する。 | true |
| horizontal | X軸（横）方向のパララックスを指定する。 | false |
以上が、オプションの一覧です。
speedは、すべて同じ方向に動かすのであれば一括で設定してしまって問題ありませんが、上下にそれぞれ動かしたい場合は、後述するHTMLに属性値として指定する必要があります。
要素が動くスピードを調整したい場合も、属性値で個別に指定する必要があります。
jsへの記述は、あくまでもベースとなる設定と思って設定してください。
HTMLの属性として個別にオプションを設定する。
前述したように、HTMLに属性値としてオプションを指定することもできます。
その場合は、以下のように記述します。
| オプション（属性） | 内容 | デフォルト値 |
| data-rellax-speed | スピード を( -10 ~ 10 )の範囲内で指定します。 | -2 |
| data-rellax-zindex | 重なり順を指定します。CSSのpositionプロパティを使い指定しても問題ありません。 | 0 |
| data-rellax-percentage | 要素の位置の調整を指定します。CSSのpositionプロパティを使い指定しても問題ありません。 | – |
必須と言ってもいいのは、data-rellax-speedでしょうか。jsへオプションとして記述してしまうと、一括で同じスピードになってしまうので、data-rellax-speedを使ってバラつかせえます。バラつかせることによって、個性的な動きになるだけでなく、デザイン性をあげることにも繋がります。
その他の「data-rellax-zindex」や「data-rellax-percentage」などは、CSSでも対応可能なので、必要に応じて使えばいいと思います。無理に属性として指定する必要はありません。
以上、実装方法とオプションの解説でした。
ここからは、私が実装中にぶつかった壁について書いていきます。
ウインドウの高さによって要素の位置が変わってしまう。
パララックスの対象とした要素ですが、オプションを設定しないとウインドウの高さによって要素の位置が変わってしまいます。
そのため、Webサイトを閲覧する端末や、閲覧者のウインドウのサイズにより見え方が変わってしまいます。
そもそもパララックスを使用しているので、どこでデザインと合わせるか問題はありますが、それでもスクロールを止める位置によっては、デザインと一致するポイントを作りたいものです。
原因は、基準がbodyになっているから。
ウインドウの高さによって、要素の位置が左右されてしまう理由は、rellax.jsのデフォルトの監視領域がbodyになってしまっているからです。
bodyは、ウインドウの高さに対して常にMAXになっているため、ウインドウの高さが変わるとbodyの高さが変わってしまいます。
rellax.jsは、スクロール量によって対象の要素の位置を決めているようなので、ウインドウの高さによって、bodyの高さが変わってしまうと要素の位置も変わってしまうというわけです。
ということは、監視領域を変更してあげれば、ウインドウの高さによって要素の位置が左右されなくなりそうです。
オプション「wrapper」を指定して基準を変更してみる。
監視対象を変更するには、「wrapper」のオプションを設定してあげます。
var rellax = new Rellax('.rellax', {
wrapper : '対象の要素のクラス名',
});これで監視領域が変更になりました。
が・・・動かない・・・。
クロームの検証を開いて確認してもエラーはでてない。
指定の仕方？指定している要素？が悪いのか分かりませんが、なぜかrellax.jsが動作しなくなってしまいました。
その後も、HTMLを組み換えり、指定する監視対象を変更してみたりしてみましたが、変化ありませんでした。
オプション「wrapper」は、ページ内に複数設定も可能。
監視対象は、ページ内に複数設置が可能です。
<div class="pic_wrap rellax-wrapper">
<div class="pic pic-03">
<img class="rellax" src="img-03.jpg" alt="イメージ画像" data-rellax-speed="-1">
</div>
<div class="pic pic-04">
<img class="rellax" src="img-04.jpg" alt="イメージ画像" data-rellax-speed="1">
</div>
<div class="pic pic-05">
<img class="rellax" src="img-05.jpg" alt="イメージ画像" data-rellax-speed="2">
</div>
</div>rellax-wrapperが監視対象を設定するクラス。
rellaxが、パララックス対象を指定するクラス。
今回は、divにアニメーションを設定する関係でimg画像に直接指定しています。
アニメーションの内容によっては、rellax.jsで付与されるクラスとバッティングするので注意してください。無理せず要素を追加して、バッティングをさけるようにしましょう。
wapperを設定した場合は、redresh()の記述が必要になる。
「wapper」をbody以外に指定した場合は、redresh();を指定しなければうまく動作しないようです。
redresh();を設定しないと、ページを読み込みした直後のみ要素の位置が調整されるだけで、動きがとまってしまいます。
そこで、redresh();を以下のように指定しrellax.jsを再構築することで、動作させることができるようになります。
var rellax = new Rellax('.rellax', {
wrapper : '対象の要素のクラス名',
});
rellax.refresh();しかし、上記のようにrefresh();を使用すると、rellax.jsが発火するたび（スクロール）にrellax.jsを再構築（スクロール位置を調整）して設定した監視領域に対して対象の要素の位置を調整してくれます。
ただ、「発火するたび＝スクロールするたびに」ということになるので、サイトがかなり重くなります。
ただでさえ、パララックスを実装するだけで重くなるので、注意が必要です。
オプションcenter: trueとした方がデザイン性を維持できる。
監視対象を変更することで、一応は目的を果たしたのですが・・・やはり動作が重いのと、refresh();で再構築をするためか、カクついた動作をするときがあります。そのため、別の方法を探してみましたら、center: trueという方法をみつけました。
center: trueをjsの記述に追加してあげます。
var rellax = new Rellax('.rellax', {
speed: '1',
center: true,
});center: true,は、要素を上下中央にセンタリングしてくれます。
そうすることで、ウインドウの高さが変わっても、要素は中央にくるようになるので、高さが変わっても要素の位置が大きく変わってしまうことは避けることができました。
あとは、data-rellax-speedで要素の動くスピードを個別に調整してあげればいい。
スピードというと少し分かりずらいかもしれないが、「動くスピード＝動く幅」と捉えると少し分かりやすいかもしれないです。
動くスピードを下げる（動く幅を少なくすること）で、要素の位置が大きくずれるのを避けることがでます。
rellax.jsの動作をPCのみにする。
スマホは、PCよりも端末の高さや、幅も多種多様なためデザイン性を担保させるのが難しい上に、通信状況の影響で動作が重くなりやすいです。
そこで、rellax.jsはPCのみで動作するように設定することにしました。
const pc = 800;
const windowWidth = window.innerWidth;
if (windowWidth > pc) {
var rellax = new Rellax('.rellax', {
speed: '1',
center: true,
});
} window.innerWidth;でウインドウ幅を取得して、pcで設定したブレイクポイント以上のときにしか発火しないようにifで制御しています。
まとめ
いろいろと試した結果、rellax.jsは比較的使いやすいプラグインでした。
ただ、調整は必須ですね。
検証した結果、調整には「wrapper」のオプションを設定するよりも、「center: ture;」と指定してあげる方が細かな調整が効くようになるのが分かりました。
center: ture;としないと、ウインドウの高さによって、要素の位置が上下してしまうので注意が必要です。
あとは、中央にきたときの位置をCSSで微調整し、data-rellax-speedを使って動くスピード（幅）を調整してあげればいいと思います。