スクロールで要素をフェードインで表示する

プラグインが他のスクリプトとバッティングしたので・・・

スクロールして可視範囲に入ったら要素を表示するアニメーション【jQuery】
https://linkage-design.net/jquery-scroll-fadein

スクロール時の動きはjavascript書く。

script.js

jQuery(window).scroll(function () {

        //要素のフェードイン　クラスfadeinがついたものに対して実行される。
        //ウインドウの表示範囲に入ったら、fadein-onクラスを付ける。
        $('.fadein').each(function(){
            var position = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > position - windowHeight + 300){
              $(this).addClass('fadein-on');
            }
        });
    });

アニメーションの設定はcssに書く。

style.css

.fadein{
    opacity : 0;
    transition : all 0.7s;    
}

.fadein.fadein-on{
    opacity : 1;
}

とてもシンプルで、大変参考になりました。
ありがとうございました。