スクロールしたらフェードインするエフェクトをファーストビュー内の要素にも対応する方法

スクロールしたら要素がフェードインするエフェクト。
例えばこういうのです。

See the Pen OwMEMX by OKD (@OKD) on CodePen.

簡単に解説をすると以下のコードで要素が可視範囲に入ったら「scrollin」というクラスを付与しています。

jQuery(function(){
    jQuery(window).scroll(function (){
        jQuery('.fadein').each(function(){
            var elemPos = jQuery(this).offset().top;
            var scroll = jQuery(window).scrollTop();
            var windowHeight = jQuery(window).height();
            if (scroll > elemPos - windowHeight + 100){
                jQuery(this).addClass('scrollin');
            }
        });
    });
  });

そして実際の動きはcssで設定をしています。

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 0.5s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadeinというクラスが付いている要素の透明度をゼロに。合わせて位置を50px下方に。
スクロールして「scrollin」というクラスが付与されたら透明度と位置を戻しています。

ただし、この方法だとページ読み込み時にフェードインする要素が画面内にあったとしてもスクロールをしないと要素が表示されません。
つまり、スクロールをしないと本来フェードインしてくるはずの要素分の空間がぽっかりと空いてしまう状況になります。

これを防ぐためには少しコードを書き換えます。

See the Pen フェードイン2 by OKD (@OKD) on CodePen.

jQuery(window).scroll();

こちらの記述を足して、即時でイベントを呼び出しています。

重たい画像を使用している場合など、このエフェクトを使わない方が良いケースもありますが、ご参考までに。
また、このような動作をさせる方法はいくつかありますが今回はそのうちの１つを紹介させていただきました。