サンプルはこちらから

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

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

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

[css] /* 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/001.jpg);} #content02_bg {background-image: url(images/002.jpg);} #content03_bg {background-image: url(images/003.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; } [/css]

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

[js] $(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); } }); }); }); [/js] [html]<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>[/html]

jQuery本体の読み込みも忘れずにしておきましょう。

いくつでも設置可能です
div.contentsとdiv.backgroundの要素は必須で、あとは自由にカスタマイズ可能。

div.backgroundの中身は空です。

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

[html] <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> [/html]