【 WEBデザイン 】 rellaxでパララックスの簡単実装 FirE♯563
超簡単にパラックス効果を実装できるJavaScriptライブラリ「rellax」の使い方の備忘録です。
【 書き方 】
わずか数行のコードを追加するだけで完了します。
パララックス効果は、どの要素と、どの要素をパララックスさせるのかや、その動きのバランスがポイントになります。
要素をパララックスさせるということ自体は非常に簡単です。
■ HTML
まずは、<head>タグ内に、rellaxをCDNで読み込みます、
<head>
<!-- relllax パララックス -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>
</head>続いて、パララックスさせたい要素にこれらを追加します。
クラス名に”rellax"を追加する。
インラインで属性を追加する。
<!--パララックスさせる要素-->
<div class="rellax"
data-rellax-speed="-1"
data-rellax-percentage="1"
data-rellax-zindex="5">
パララックスさせる要素
</div>
<!--パララックスさせる要素-->これらのコードは、パララックスの動きの調整になります。
data-rellax-speed
rellax要素のスピードを操作する
-10 ~ 10 の数値が設定可能
値が大きいほど速くなる
マイナス＝下方向へ移動
プラス＝上方向へ移動
data-rellax-percentage
要素の位置をパーセンテージで設定する
マイナス＝下方向へ配置
プラス＝上方向へ配置
data-rellax-zindex="5"
重なり順を指定する
CSSのz-index同様
このように、要素に個別に属性をつけて動きを管理できます。
■ JavaScript
JavaScript側では、オプションを設定でき、rellaxがついた要素を一括して動きを指定できます。
//パララックス
var rellax = new Rellax('.rellax', {
speed: -5,
center: false,
wrapper: null,
round: true,
vertical: true,
horizontal: false,
breakpoints: [375, 768, 1200]
});例えば、
center：trueは、data-rellax-percentage=”0.5″と同じ役割になります。
全rellax要素に対して適応させる場合は、JavaScript側でcenter：trueを指定すれば完了で、
個別で違った指定をしたい場合には、data-rellax-percentage=”0.5″を属性として指定するという風に使い分けます。
JS側のオプションは以下の通りです。
speed
要素のスピードを設定できます。-10~10まで設定
プラスは上方向、マイナスは下方向へ移動する。
center
falseかtrueの値を設定。
trueにすると、data-rellax-percentage=”0.5”と同じ効果。
wrapper
監視領域を設定。
初期値はbodyに設定されており、bodyのスクロールに合わせてパララックス要素が動く。
他の要素を指定すると、その要素の監視する。
horizontal
ウェブサイトを垂直でなく、水平にスクロールする際に使用。
horizontalをtrueにする場合は
verticalプロパティをfalseにする必要がある。
vertical
ウェブサイトを垂直にスクロールする際に使用。
breakpoints
3つのブレイクポイントを指定可能。
モバイル・タブレット・デスクトップのそれぞれの解像度を指定することで、要素に設定したそれぞれの速度が適応される。
breakpoints: [576, 768, 1201]
このようにオプションが多数ありますが、重要なのは、breakpointsです。
この設定をしておかないと、PCの時はいいパララックスしていても、スマホで見たら動きすぎていることも起きます。
逆にこの一文を追加しておくだけで、各デバイスに合わせていい具合の動きにしてくれます。
【 まとめ 】
JavaScriptライブラリ「rellax」の使い方について書きました。
とても簡単に実装できるので、ぜひ試してみてください。