JavaScriptを使ってIntersectionObserverAPI（インタレセクションオブザーバー・エーピーアイ）という要素の監視するシステムを使いこなしてみましょう
- IntersectionObserverAPI（インタレセクションオブザーバー・エーピーアイ）って何
- 何ができるの？
- 用語の解説
IntersectionObserverAPIって何
・今回からJavaScriptのIntersectionObserverAPIについて学んで行きます。
・IntersectionObserverAPIとは日本語で交差監視APIと呼ばれていてある要素を監視して特定の領域に入ったら領域とどれだけ接したかを調べることができる仕組みのことです。
・説明してもよくわからないと思いますのでまずはIntersectionObserverAPIの用途から見ていきたいと思います。
何ができるの？
・IntersectionObserverAPIを使う事によってホームページの画面をスクロールしていく中である画像が画面に現れたときにふわっとアニメーションで現れるようにすることができます。
・また、ページの最後の方に配置した画像を完全に読み込んだ後に次の画像を用意するような設定ができたりして画像の読み込みの負荷を減らしたりできます。
・また、画像がどれだけ表示されたかなども設定できるので80％以上広告がブラウザに現れたときだけ広告が見られたと判断するような仕組みも作ることができます。
・このようにある領域に要素が何％入ったかを判断してくれるというのがIntersectionObserverAPIなので使い方によってはかなり重宝するシステムになります。
用語の解説
・次に用語の解説をしていきます。
・まず監視する要素のことをtarget(ターゲット)といいます。
・次にブラウザなどのtargetが交差していく領域をroot(ルート)といいます。
・最後にtargetがどれくらいrootと交差したかの割合をIntersection Ratio(インターセクションレ−シオ)と呼びます。
・例えば画像(target)の20％がブラウザに現れた(root)場合はIntersection Ratioが20％と計算してくれます。
・なのでIntersection Ratioが20％の時に画像がゆっくり現れる指定をすればスクロールしていく中で画像だけがふわっと現れたようなアニメーションが作れます。