tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。Observer]この記事は、以下の記事の続編となる記事です!ぜひ前回の記事と見比べながらご覧になると、より分かりやすいかと思います。「その要素がViewportに入ったら」という条件でふわっと表示させる、という事について書きました。実際の制作では、1つの要素だけではなく、Webサイト上でスクロールに応じて複数の要素を次々表示させる、といった使い方をきっとするはずです。現実的ではない様に思えますよね。そんな不便な仕様のわけがないと。そんなふうに思うはずです。複数の要素の監視が可能になります。});}基本的には、前回の記事のコードと似た様な構成ですが、変更点としては21行目~23行目です。いうclassをそれぞれに付けておきます。配列内の要素の数の分だけ監視対象として設定している記述になります。複数の要素を監視対象とした場合、そのそれぞれの要素にアクセスしたいケースがあると思います。その場合は、上記コードの27行目〜末尾にある様にcallback関数の方を書き換えれば、アクセスが可能になります。entry.target;とすれば良いです。forEachが動いている中で参照されていると言うことは、その瞬間、実行されている挙動の対象が取得できる、と言うことですね。次の様に指定してあげれば、時間差でアニメーションを実行する処理ができたりします。付与され...という形になりますので、柔軟な処理が可能になるかと思います。用意しておくことがあまり良しとされない案件もあると思います。「n回目の実行」という情報があると、分岐などしやすいかと思われます。動いているサンプルを作成してあります。次のリンクより、確認することができます。複数の対象要素を監視するにはどうすれば良いのか?といった事を中心に、記事を書いてみました。使ってみて、その便利さをとても感じています。大げさですが、ある種の感動すら覚えました。組み合わせるケースなどにおいてGoogleが公開している記事内でも使用が推奨されている手法ですので、その点においても知っておくと、何かと良いかと思います。当サイトでは、今後もWeb制作に関するさまざまな記事を更新していく予定です。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。