スクロールすると全画面の背景画像がフェードインするjQueryサンプル【レスポンシブ対応】

公開日: 2017年9月19日 最終更新日: 2018年3月29日

スクロールで表示していくコンテンツ毎に、異なる背景をフェードイン・フェードアウトさせたかったので、備忘録としてデモをアップしました。

 

demoページを見る

 

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

CSS3のプロパティtransitionを使い、フェードイン・アウトを表現します。
背景自体はposition: fixedで配置し、opacity: 0で透明にしておきます。
コンテンツが表示されるタイミングでopacity: 1となるようにします。
背景にする画像はbackground-imageで読み込んでおきます。

 

jQueryのスクロールイベントでClassを操作

div.contentsclass="show"がオン・オフすることにより、背景画像がふわっとフェードインします。

ソースのコピペでも動作します。
jQueryライブラリの読み込みも忘れずに。

背景のフェードイン効果はdiv.contentsの数まで設定できる

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

以上、スクロールイベントとCSS3を使用した背景のフェードイン効果の実装方法でした。

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