なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

【rellax.js】rellax.jsでパララックス

こんにちは。
12月はアドベントカレンダーと称して毎日1記事ずつ書いていきたかったのですがサボってしまっております。今日はパララックスについて書いていきます。

パララックスとはWebサイトのスクロールのスピードに差をつけて、ユーザーの目を惹くデザインを叶えてくれるものです。JavaScriptやjQueryで実装しますが、今回は一からではなくrellax.jsを使って簡単に実装する方法をやってみたので紹介していきたいと思います。

まずrellax.jsをDLします。
rellax.js

次にHTMLのhead内で読み込みます。パスを間違えないように気を付けてください。

次にbodyの終了タグの直前に以下を追加。私が参考にさせていただいたブログにはこのことが書かれておらず、別のブログを参考にしてこちらを発見、入れたところ無事動きました。

パララックスを適用したい要素にクラス名rellaxを付けます。data-rellax-speedはスクロールのスピードを入れます。マイナスも使えます。この属性はなくてもOKですが複数の要素にパララックスを指定することが多いと思うので多分使うと思います。これでスクロールしてみると周りと比べてゆっくり動きます。

実際にrellax.jsを使って、卒業制作展のサイトを作っているので、宣伝も兼ねて載せておきます。

Rainbow Dreams

メルヘンをコンセプトにした架空のカフェサイトです。クッキーの部分がパララックスになっています。ひとつひとつの要素に微妙に差をつけるのに苦労していて、まだ制作途中ですが温かく見守ってください…。

次はファビコンの設置について書きたいと思います。