スクロールしていくと背景画像が切り替わる効果の実装方法【レスポンシブ対応】

公開日: 2017年9月19日 最終更新日: 2018年6月11日

スクロールをしていくと、任意のセクションが表示されるたびに背景画像を切り替える効果をjQueryとCSSで実装しました。

配布されているjQueryプラグインなどは未使用。
そのセクションに合った背景画像をフェードイン・アウトで表示させたかったので備忘録としてデモをアップしました。

demoページを見る

フェードイン効果はCSSを使う

CSS3のプロパティtransitionを使い、フェードイン・アウトを表現します。

背景自体はposition: fixedで配置し、デフォルトではopacity: 0で透明にしておきます。
コンテンツが表示されるタイミングでclass=showを追加し、opacity: 1に変更。

背景にする画像はbackground-imageであらかじめ読み込んでおきます。

jQueryのscrollイベントでclassを操作

div.contentsに、class=showをaddClass, removeClassすることにより、背景画像がふわっとフェードインします。

コピペでも動作します。
jQuery本体の読み込みも忘れずにしておきましょう。

いくつでも設置可能です

div.contentsdiv.backgroundの要素は必須で、あとは自由にカスタマイズ可能。

div.backgroundの中身は空です。

div.contentsをいくつ増やしても同じようにフェードイン・アウトします。

 

以上、「jQueryとCSSで背景画像のフェード切り替え効果」の実装方法でした。

簡単なのでシンプルなランディングページなどに活用してみてはいかがでしょうか。

お気軽にコメントをどうぞ。