スクロールし、要素が表示域に入ったらフェードインで表示させるようにしたい。
以下のサイトを参考にしました。
https://imasashi.net/element-fadein.html
参考サイトのデモは正常に動作しておりますが、
以下のようにコードを書いたところ1つめの.fadeinが表示域に入った途端、全てのfadeinクラスに.scrollinが付与されてしまいます。
参考サイトのように表示域に入った.fadeinに、順に.scrollinを付与したいです。
間違っている点を教えてください。
$(this)の部分が間違っているかと思いましたが、参考サイトと全く同じJSコードをコピーしております。
jQueryのバージョンは3.5.1です。
<style> section{ display: flex; justify-content: space-between; width: 80%; margin: 500px auto; } .fadein{ opacity : 0.1; transform : translate(0px, 100px); transition : all 500ms; } .fadein.scrollin{ opacity : 1; transform : translate(0px, 0px); } #effect2 .fadein:nth-of-type(2){ -moz-transition-delay:200ms; -webkit-transition-delay:200ms; -o-transition-delay:200ms; -ms-transition-delay:200ms; } #effect2 .fadein:nth-of-type(3){ -moz-transition-delay:400ms; -webkit-transition-delay:400ms; -o-transition-delay:400ms; -ms-transition-delay:400ms; } </style> <script type="text/javascript"> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 200){ $(this).addClass('scrollin'); } }); }); }); </script> <section id="effect1"> <dl class="fadein"> <dt>1-1 タイトル</dt> <dd>1-1 説明文</dd> </dl> <dl class="fadein"> <dt>1-2 タイトル</dt> <dd>1-2 説明文</dd> </dl> <dl class="fadein"> <dt>1-3 タイトル</dt> <dd>1-3 説明文</dd> </dl> </section> <section id="effect2"> <dl class="fadein"> <dt>2-1 タイトル</dt> <dd>2-1 説明文</dd> </dl> <dl class="fadein"> <dt>2-2 タイトル</dt> <dd>2-2 説明文</dd> </dl> <dl class="fadein"> <dt>2-3 タイトル</dt> <dd>2-3 説明文</dd> </dl> </section>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。