こんにちは！ワタナベです。
先日久々にライブへ行きました！いろいろと制限された中でしたがとても楽しい1日を過ごすことができました
やっぱりライブはいいものですね(^^♪
今回は簡単にパララックスを実装できる、「rellax.js」を使ってみた備忘録です！
rellax.js
まずは、公式からgithubへ行き、zipファイルをダウンロードします。
使うファイルは「rellax.min.js」です。任意の場所へ入れましょう。
<script src=”js/rellax.min.js”></script>
<script>
var rellax = new Rellax(‘.rellax‘);
</script><!– ※任意のclassを設定 –>
↑を記述しjsは準備完了です。
htmlは以下のようになります。
<div class=”rellax” data-rellax-speed=”-3″></div>
<div class=”rellax” data-rellax-speed=”3″></div>
これで実装完了です。簡単ですね☆
data-rellax-speedって？
data-rellax-speedはrellax要素のスピードを操作します。
-10～10の数値が設定可能で、値が大きいほど早くなります。
マイナス値で下、プラス値で上方向に、スクロールしたときに移動します。
他にも設定できる属性がありますが、とりあえずこれさえ覚えておけば大丈夫です。
他の属性については↓がわかりやすかったです。
オプションやデモなどもこちらがわかりやすいので是非ご覧下さい。THANKS☆彡
パララックスが取り入れられているとスクロールが楽しくなりますよね(*‘ω‘ *)
デザインの幅も広がりますので、パララックス入門にもピッタリなプラグインだと思います♪
是非使ってみてください。
話は変わりまして、冒頭でもちらっと話しましたが先日やっとこさライブへ行ってまいりました。
会場は「KT Zepp Yokohama」！DiverCityの方は昨年末に初めて行きました。
Zeppはかわいいドリンクホルダーがドリンクと一緒にもらえるのでちょっと楽しみな会場だったりします(笑)
自分が行ったライブはとあるコンテンツの初ライブイベントだったので、次は色々な制限が無い中で開催されることを祈って今後も応援していきたいと思います(*´ω｀)
それではまた次回。ご閲覧ありがとうございました！
