スクロールに連動して背景画像が切り替わる効果の実装方法【jQuery+レスポンシブ】

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

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

demoページを見る

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

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

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

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

/* init */
.background {
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    background-position: center center;
    opacity: 0;
-webkit-background-size: cover;
        background-size: cover;
-webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
}
.show .background {
    opacity: 1;
}
.contents .wrap {
    padding: 40vh 0 60vh;
    position: relative;
    z-index: 2;
}
/* design*/
#content01_bg {background-image: url(images/bald-eagle-2715461_1920.jpg);}
#content02_bg {background-image: url(images/coast-2723729_1920.jpg);}
#content03_bg {background-image: url(images/woman-2711279_1920.jpg);}
#content01 .wrap { background-color: rgba(255,0,0,0.2);}
#content02 .wrap { background-color: rgba(0,255,0,0.2);}
#content03 .wrap { background-color: rgba(0,0,255,0.2);}
.text-box {
    padding: 50px 25px;
    width: 480px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}
.text-box .catch {
    margin: 0 0 10px;
    font-size: 40px;
}
.text-box .copy {
    margin: 0;
    line-height: 2;
}

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

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

$(function(){
    $(window).on('load scroll resize', function(){
        var winHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var showClass = 'show';
        var timing = 100;
        $('.contents').each(function(i, elem){
            var contentsPOS = $(elem).offset().top;
            if (scrollTop >= contentsPOS - winHeight + timing){
              $(elem).addClass(showClass);
            } else {
              $(elem).removeClass(showClass);
            }
        });
    });
});

【追記：2024.2.28】コードを一部修正しました。

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

いくつでも設置可能です

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

div.backgroundの中身は空です。

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

<section id="contents">
    <div id="content01" class="contents">
        <div id="content01_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
                <p class="catch">コンテンツ1</p>
                <p class="copy">テキスト</p>
            </div>
        </div>
    </div><!-- content01 -->
    <div id="content02" class="contents">
        <div id="content02_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
                <p class="catch">コンテンツ2</p>
                <p class="copy">テキスト</p>
            </div>
        </div>
    </div><!-- content02 -->
    <div id="content03" class="contents">
        <div id="content03_bg" class="background"></div>
        <div class="wrap">
            <div class="text-box">
                <p class="catch">コンテンツ3</p>
                <p class="copy">テキスト</p>
            </div>
        </div>
    </div><!-- content03 -->
</section>

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

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