Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8700

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

$
0
0

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

スクロールして可視範囲に入ったら要素を表示するアニメーション【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;}

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


Viewing all articles
Browse latest Browse all 8700

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>