今回はCSSのみで作ることができるパララックスの実装方法について解説をしていきたいと思います。
簡単に実装できる方法ですのでホームページを作りたい方、WEB制作をしたい方もぜひ参考にしてみてほしいです!
01パララックスとは？
「サイトを構成するパーツごとに動くスピードや向きをずらすスクロール効果」のことを言います。
パララックスを用いることで、サイトに奥行きがでて、視差効果を楽しみながらスクロールすることができます！
まずはサンプルから見ていきましょう！
【パララックスサンプル①】
～画像のみの切り替え～
See the Pen
parallax base by Rita-plus.web@KAZUMA (@k-the-reactor)
on CodePen.
【パララックスサンプル②】
～画像とテキスト交互表示～
See the Pen
parallax textplus by Rita-plus.web@KAZUMA (@k-the-reactor)
on CodePen.
【パララックスサンプル③】
背景画像を固定したまま文字を動かす
See the Pen
parallax F&B by Rita-plus.web@KAZUMA (@k-the-reactor)
on CodePen.
【パララックスサンプル④】
背景画像を固定したままカラフルな文字を複数動かす
See the Pen
parallax colorfull by Rita-plus.web@KAZUMA (@k-the-reactor)
on CodePen.
02パララックスを実装する方法
パララックスを実装する方法は2パターンあります。
- ライブラリの利用
- オリジナルで作成する
今回はオリジナルで作る方法を解説していきます。
オリジナルで実装する方法
ホームページをオリジナルで実装するメリットやデメリットをしっかり理解しておくと良いと思います。
オリジナルで実装するメリット
- 自由にデザインを設計できる
- 動作が重くならずに済む
オリジナルで実装するメリットはデザインを自由に設計できることです！自由なデザインを作ることでサイトに独自性をもたらすことができます。
また外部のライブラリを読み込むわけではないのでサイトの表示スピードにも影響が出にくいといえます。
オリジナルで実装するデメリット
- 実装するのに時間がかかる
- コストがかさむ
- センスの差が出る
先ほどのメリットとは反対に、オリジナルで制作をするためどうしても実装に時間＝コストがかかってきます。もちろんオリジナルでしか作れない魅力はありますが、お金をあまりかけずにホームページを作りたい方にとってはデメリットになってしまいます。
実装する際の注意点
パララックスをcssのみで実装する場合覚えておいていただきたい注意点がありますので紹介させていただきます。特性を知ったうえで実装いただけると幸いです。
注意点
オリジナルのパララックスを実装するうえで注意点です！background-attachment: fixedを使用した場合、ios(iphone)でサイトを確認するとパララックスになっていない現状が起きますのでご注意ください
このbackground-attachmentと一緒にbackground-size: coverというプロパティを一緒に記述すると、iPhone端末でバグが発生してしまいます。これは公式でも確認されているiOSの不具合のようです。
対処法
:beforeを使用し対処する【background-attachmenを使うのではなく、全体の要素に「擬似要素」で背景を表示して固定させる】方法がベターかなと思います。具体的な方法は改めて解説をしていきます
02まとめ
パララックスを使うことで、サイトに遊び心を持たせることができ、ユーザーが飽きないWebページを作ることができます。しかし、何も考慮せずに実装するとガタガタなパララックスになってしまいますし、かえってサイトの完成度が下がってしまいます。自身のサイトにパララックスを実装する際は、どのプラグインが適切か考えてみましょう！それにしてもいっぱいありすぎて迷っちゃますよね！
