パララックス（視差効果）CSSのみ

パララックス

パララックス（Parallax）とは、Webデザイン上の「視差効果」のこと指します。 パララックスデザインとは、Webサイトに立体感や遠近感を持たせることでデザイン性が高まるデザインの表現方法の一つです。

パララックスを実装するには、JSライブラリやプラグインを使ったお手頃な実装があります。しかし、それらの中身は複雑で初心者が理解しようとするとハードルはちょっと高いです。

そのため、ちゃんと仕組みを理解してパララックスを実装したいと思う方や、サイトの一部分だけの実装なので、HTMLとCSSだけでサクッと作りたいと思う方は参考にしてみてください！

CODE

パターン01

See the Pen パララックス01 by ちいうさ (@zqnixpal-the-looper) on CodePen.

パターン02

See the Pen パララックス 02 by ちいうさ (@zqnixpal-the-looper) on CodePen.