スクロール時にセクションが変わったら、全画面で表示している背景画像を差し替える。
デモページを表示
CSS
補足
- ウィンドウ内に複数のセクションが表示される場合は、下のセクションで指定した背景画像が表示されるので注意。
- 背景画像を表示するための div#cover-bg 要素は jQuery で追加される。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- load 時に背景画像を表示するための div#cover-bg 要素を追加している。
- load scroll 時に、セクション（このサンプルでは data-cover-bg 属性がついた要素）の上端がウィンドウ下端を超えたら、data-cover-bg 属性で指定されている背景画像を、上記 div#cover-bg 要素に設定している。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- 各セクションに表示する背景画像は、各セクションの div 要素の data-cover-bg 属性で指定する。
- 背景画像を表示しないセクションは、data-cover-bg 属性に "none" を指定する。
関連投稿