コーディング

【備忘録】簡単にパララックス実装 「rellax.js」を使ってみた

  • このエントリーをはてなブックマークに追加
【備忘録】簡単にパララックス実装 「rellax.js」を使ってみた

こんにちは!ワタナベです。

先日久々にライブへ行きました!いろいろと制限された中でしたがとても楽しい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はかわいいドリンクホルダーがドリンクと一緒にもらえるのでちょっと楽しみな会場だったりします(笑)

自分が行ったライブはとあるコンテンツの初ライブイベントだったので、次は色々な制限が無い中で開催されることを祈って今後も応援していきたいと思います(*´ω`)

 

それではまた次回。ご閲覧ありがとうございました!

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ