質問: images[i].src; }; }); ``` (css下記を基本に複数用意しているので一部を抜粋しています) ``` .transparent .title { opacity : 0; transform : translate(0, 50px); transition: all 500ms ease-out; } .transparent.fadein .title { opacity : 1; transform : translate(0, 0); } ``` lazysizes.jsやinview.jsなどのプラグインとも組み合わせたりして実現できないかと試してみましたがうまくいきませんでした。 色々と調べてみているのですが、どんどんわからなくなってきてしまいました。。 画像が全て読み込まれてから処理が開始されているかどうかの確認の仕方がわからず、ちゃんとその処理も動いているのかもちょっとわかっていません。 想定している処理がそもそも違うなどもございましたらご指摘いただけると幸いです。 とても初歩的なところもあり恐縮ですが、何卒よろしくお願いいたします。
回答: これで、 > > 画面内に要素が入ったらクラス名「fadein」がある要素にクラス名「transparent」を追加 > > > はできていると思います。 これでどうでしょう? ``` $(function() { $(window).on('scroll', function() { var count = 0; // 今回のスクロールで、遅延フェードインした回数 var windowY = $(window).scrollTop() + $(window).height(); $('.transparent').each(function() { if ($(this).hasClass('fadein')) { return; } var diffY = windowY - $(this).offset().top; if (diffY > $(this).height()) { // 画像が上すぎるときは、遅延しないでフェードイン $(this).addClass('fadein'); } else if (diffY > 0) { // 遅延フェードインして、次に遅延フェードインする時間を延ばす $(this).delay(count++ * 500).queue(function() { $(this).addClass('fadein'); }); } }); }); }); ```