フェードイン効果は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/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;
}

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

$(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);
            }
        });
    });
});

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

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>