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

2017年9月19日 jQuery NAndo

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

デモ

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

CSS3のプロパティtransitionを使い、フェードイン・アウトを表現します。
背景自体はposition: fixedで配置し、opacity: 0で透明にしておきます。
コンテンツが表示されるタイミングで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のスクロールイベントでClassを操作

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

$(function(){
    $('.contents').each(function(i, elem){
        var contentsPOS = $(elem).offset().top;
        $(window).on('load scroll resize', function(){
            var winHeight = $(window).height();
            var scrollTop = $(window).scrollTop();
            var showClass = 'show';
            var timing = 100; // 100pxコンテンツが見えたら次のif文がtrue
            if (scrollTop >= contentsPOS - winHeight + timing){
              $(elem).addClass(showClass);
            } else {
              $(elem).removeClass(showClass);
            }
        });
    });
});

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

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

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

<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>

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

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