プラグインが他のスクリプトとバッティングしたので・・・
スクロールして可視範囲に入ったら要素を表示するアニメーション【jQuery】
https://linkage-design.net/jquery-scroll-fadein
スクロール時の動きはjavascript書く。
script.js
jQuery(window).scroll(function(){//要素のフェードイン クラスfadeinがついたものに対して実行される。//ウインドウの表示範囲に入ったら、fadein-onクラスを付ける。$('.fadein').each(function(){varposition=$(this).offset().top;varscroll=$(window).scrollTop();varwindowHeight=$(window).height();if(scroll>position-windowHeight+300){$(this).addClass('fadein-on');}});});
アニメーションの設定はcssに書く。
style.css
.fadein{opacity:0;transition:all0.7s;}.fadein.fadein-on{opacity:1;}
とてもシンプルで、大変参考になりました。
ありがとうございました。