スクロールしている時の背景画像にパララックス効果を加える方法

2016/4/30更新

最近よく見かけるスクロールしていくと固定された背景画像が変わっていくページを作ってみました。最近よく見かける割に、すごい新しい手法を使って作ったわけではないので、工夫次第で、今ある技術でもっといろんな表現が出来るかもなぁと再確認しました。

作り方は完全に我流なので、こういう作り方の方がスマートっていうやり方があれば是非とも教えてください。

デモ

HTMLとCSSを準備

HTMLとCSSを準備します。
流れとしては最初の段階ではbodyにbackground-imageで「01.jpg」を表示させておき、スクロールしていって、クラス[bg02][bg03][bg04]を追加していき、backgroundを上書きするやり方になります。[background-attachment]プロパティでスクロールした時に背景画像を固定するかどうかを指定出来ます。

HTML

CSS

jQueryを準備

jQueryではそれぞれ必要な高さを取得して、背景画像を切り替えたい高さにきた時に、設定したクラスが追加されるようにしています。

少しでも参考になれば幸いです。

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/2082.html/trackback