▶▶▶ 【新型コロナウイルス】期間限定!
越境ECサイト構築で最大150万円キャッシュバック支援中

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

パララックスを使用した背景画像の立体効果付与(パーティクル編)

テクニック

パララックスを使用した背景画像の立体効果付与(パーティクル編)

最近では企業サイトから個人サイトまで「パララックス(視差)」を使用したサイトが多く見られるようになってきました。また、海外のプラグインなどでも実装できるようになってきましたが今回はcssやJSを使って試してみたいと思います。

パララックス(視差)とは

サイトページをスクロールした際にコンテンツやそれに伴う背景画像など、異なる速度で動いたりする事によって奥行き感や立体感を出したりする効果の事になります。

しかし、使い所によってはしつこくなり過ぎたり、動きがメインになってしまいコンテンツが目立たなくなってしまう事もある為、用途やサイトデザインによって使い分けした方が良いと感じました。

パララックスを実践

様々なサイトを見て回っているとやはり使用されているサイトが沢山ありますがやり方については、ほとんど解らなかった為、「株式会社ネディア」様の「【jQuery】パララックスデザインの作り方」を参考にさせていただいております。

参考サイトの方では4つのboxを異なる速度でスクロールと同時に動作させるというものでしたが今回は背景画像として使われそう?なパーティクルをサイズによって異なる速度で動かそうと思います。

参考サイトに沿って同じようにHTML、CSS、JSを作っていきます。

[HTML]

[CSS]

[JS]

DEMO→

JSで記述した「スクロールの値を取得」を使用し、それぞれ異なった速度で動かしたい対象にその値を使う事によってパララックスをすることが出来ました。
背景画像を立体的に動かしたいという趣旨でしたが、ページのコンテンツに反映させる事によって同じように奥行き感などを出すことが簡単に出来ます。
しかし今回は比較的簡単な基本の動作のみでしたが、これらの効果に更に複雑なものを加えようとすると手間は掛かるかと思いますが色々な可能性があるので試してみる価値はありそうと感じました。

最後に、
分かり易い説明とDEMOの公開をして下さった「株式会社ネディア」様に御礼を申し上げます。
簡単に実装出来ますので気になった方はぜひ試してみてはいかがでしょうか?

この記事を書いた人
yonekuraのアイコン

yonekura

かけだし初心者マン。気になったモノを自身の勉強の為、記録として書いています。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。