IntersectionObserverってなあに？
IntersectionObserverとはJavaScriptで用意されている、DOM要素の交差判定APIです。
今までoffsetを使って実装されていたような、スクロールで実行するアニメーションが楽に実装できます。
この下から、使いこなしのサンプルを見ていきましょう。
IntersectionObserverを使うといいことが!
testtext!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi magni aliquid, impedit consequuntur ratione necessitatibus consequatur quaerat repudiandae autem amet quas non accusamus numquam est aspernatur delectus deserunt iste facilis.
testtext!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi magni aliquid, impedit consequuntur ratione necessitatibus consequatur quaerat repudiandae autem amet quas non accusamus numquam est aspernatur delectus deserunt iste facilis.
testtext!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi magni aliquid, impedit consequuntur ratione necessitatibus consequatur quaerat repudiandae autem amet quas non accusamus numquam est aspernatur delectus deserunt iste facilis.
Anna Kourinbou
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores earum explicabo veniam nihil laudantium totam laborum distinctio corporis facilis voluptatum quidem commodi, accusantium repellat temporibus maxime quaerat consequuntur magni voluptates!
Tsukasa Hirasaka
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores earum explicabo veniam nihil laudantium totam laborum distinctio corporis facilis voluptatum quidem commodi, accusantium repellat temporibus maxime quaerat consequuntur magni voluptates!
IntersectionObserverAPIで
快適なサイト制作を！
もっと詳しく知りたくなったら……
このページはIntersectionObserverAPIでスクロールアニメーションをするサンプルページです。
このページで紹介した登場人物は架空の人物であり、キャラクターを使用したコンテンツ化の予定はございません。
IntersectionObserverAPIの詳しい使い方はMDNのドキュメントをご覧ください。