HTMLとCSSでパララックス「的」な手法

先日、サイト制作の際に「スクロール時に背景を固定してパララックス的な見せ方をしたい、（且つお安く。。）」との要望があり、CSSとHTMLの工夫でいけるかなと挑戦した事がありました。
似たような手法を今後使う事もありそうですので、一度まとめておこうと思い、今回記事にしてみます。

パララックス「的」な手法

パララックス効果とはスクロール時の動いた高さを数値として取得し、座標や移動速度を個別に設定することで奥行き感を出したり、フェードイン・アウトさせたりする手法なのですが、今回のお客様の要望では「スクロール時に背景を固定」ということでしたので、CSSで背景を固定しつつ表現を工夫していきます。
本来のパララックス効果とは違うのですが、今回は「背景を固定」ということもあり、スクロール値を取得せず、固定した背景が切り替わる方法とします。

HTMLとCSS

HTML

CSS

解説

背景の画像を、「header」と「.two」に配置し、それぞれ「background-attachment: fixed;」で固定します。
「.one」と「.three」は通常の領域とします。
スクロールをすると「.one」を境に上下の固定された背景画像がパララックス「的」に切り替わって見えるようになっています。
ポイントとして、使用する背景画像は縦スクロールを行っても途切れることがないように余裕をもって縦長に作っておくことです。

まとめ

パララックス効果はなんとなく技術的に複雑なイメージがあり、導入するのに手間がかかりそうなのですが、今回のように特別なスクリプトを用いることなく、それっぽい効果を実装することが出来ました。
本来のパララックス効果とは違うのですが、十分今風な表現になっていると思います。

その他、ページコンテンツをブラウザ幅一杯に広げたり、背景で動画を流したりと、今流行っている手法がいくつかあります。
これらについてもスマホ対応を含め、簡単に実装できる手法を模索して行ければと思います。