パララックス効果(視差効果)とは、スクロールすると前面と後面がずれて動いたり、少し遅れたりすることで奥行があるように見せることができる効果のことです。
このパララックス効果を使用することで、ワンランクお洒落なWebページを作成することができます！
ただ、実際に使ってみようと思ったときにいくつかのJSライブラリがあり、
→どれがいいのかわからない
→どれを使ったら理想の動きになるかわからない
と私自身なったので、今回は私が実際に使ってみた4種類のパララックスについて紹介していきます。
特徴と感想
ざっくり4種類のパララックスの特徴と使ってみた感想をまとめてみました。
今回は、Luxy.jsでのパララックス効果をベースにWebページを作成したので、「Luxy.jsと併用できるか」という内容も含まれています。
Luxy.js
▼使ってみた特徴と感想
・全体を囲っている<div>などにid名を付けるだけで、全体にスクロールパララックス効果が付く。
・全体に効果が付くので便利な反面、全体がposition:fixed;で固定されるので厄介な部分でもある。
・個別に速度を調整することが可能。
・他のパララックスと併用しづらい。
・スマホで見ると結構カクカクして気になるので、PCのみに適用させる方がよさそう。
(例)
<div id="luxy" class="luxy-el" data-speed-y="10">
～省略～
</div>
Rellax.js
▼使ってみた特徴と感想
・Luxy.jsと同じように、全体にパララックス効果を付与することができる。
・position:fixed;で固定されるので、Luxy.jsとの併用は難しい。
・スマホでもカクカクせずに使える。
・背景画像のみに適用させて背景を固定させることができる。
(例)
<div class="rellax" data-rellax-speed="-10">
～省略～
</div>
parallax.js
▼使ってみた特徴と感想
・背景画像を付けたい<div>などに<img>を記述するだけで使える。
・jQueryと一緒に読み込む必要がある。
・一言でいうと「背景画像にパララックス効果を付与するJS」。
・スマホでは動かない。
・Luxy.jsとの併用も少しがたつくけど可能。
(例)
<div class="parallax-window" data-parallax="scroll" data-speed="0.1" data-image-src="/img/***.jpg">
～省略～
</div>
simpleParallax.js
▼使ってみた特徴と感想
・<img>にclass名を付けるだけで画像にパララックス効果を付与できる。
・jQueryと一緒に読み込む必要がある。
・一言でいうと「画像にパララックス効果を付与するJS」。
・Luxy.jsとの併用も可能。
(例)
<img class="thumbnail" src="/img/***.jpg">
まとめ
実際に上記の4つでWebページを作成したときは、PCは「Luxy.js」をベースにして、スマホは要所要所「Rellax.js」を使用、背景画像は「parallax.js」、画像は「simpleParallax.js」・・といろいろ使ってみましたw
なかなか理想の動きに近付けるのは難しいですが、それぞれに使いやすい点があるので、併用して理想のWebページを作成してみてください！
私たちはWebページの作成依頼も受け付けています♪
こういうデザインにしたい！
試してみたけどできなかった・・
などの簡単な修正でしたらワンコインから受け付けていますので、TwitterのDMかお問い合わせフォームよりお気軽にご連絡ください＾＾
最後まで読んでいただきありがとうございました！