CSSとHTMLだけで背景画像を固定しパララックスっぽくしてみる | Glow-Factory今回は、HTMLとCSSだけでスクロール時に背景画像にパララックス効果を付けるご紹介です。 実装に関しては、とても簡単に出来ますので、どこかで使えるかなーと思いながら自分の備忘録用としても書いておきたいと思います。 特に1カラムのサイトやポートフォリオなどに使えるパララックス効果だと思いますし、ストーリー性を持たせたりすると面白そうだなーとか思いながらデモサイトを作っていました。 下記にデモサイトも用意していますので、ご参考頂ければと思います。 デモサイト 実装方法 それでは、実装方法をご説明していきたいと思います。 基本的にHTMLとCSSしか利用しないので、とてもスムーズに実装出来るかと思います。 まずは、最初にHTMLでマークアップをしていきます。 <div class="parallax parallax_img_1"> <div class="box"> <h2>Parallax
