2024年3月24日SHAREツイートシェアはてブLINE目次はじめにスクロール処理に使用するもの見本とコード説明おまけさいごにはじめにこんにちは。ナオキです!今回はJavaScriptのみを使用して画像をふわっと表示させる方法を紹介します。参考にしてください!対象読者JavaScript初学者の方JavaScriptでスクロール処理を行いたい方スクロール処理に使用するもの今回はJavaScriptのIntersectionObserverを使用してスクロール処理を実装したいと思います!IntersectionObserverとはターゲット要素を監視し、その要素が特定の領域内にに入ったり出たりするのを検知し、ターゲット要素と特定の領域が交差している時に関数を実行させることができます!scrollイベントでも簡単に実装することは出来ますが、スクロールするたびにイベントが発火してしまうのでパフォーマンス的にあまり良く有りません。それに比べてIntersectionObserverは非同期で実行されるのでパフォーマンスにも影響しにくいです。見本スクロールしたら画像をふわっと表示Webサイトでよく見るスクロール処理です。実行observer.observe(image);コード説明HTMLで表示させたい画像を記述します。CSSでは、bodyでスクロール分の余白を取っています。4sを指定しふわっと表示されるようにします。JavaScriptでは、まず1のイベントを発火させたい要素をdocument.getElementById()にて取得しています。次に、2でIntersectionObserver()を呼び出します。第1引数に実行したい関数、第2引数にはオプションの設定を書いていきます。3でオプションを記述しています。オプションプロパティは以下の3つがあります!root監視するベースとなる要素を指定できます。初期値はブラウザのviewportになります。※viewportとは、表示領域のことです。今現在見ているページの範囲がviewportになります!rootMargin交差を感知するルートからの距離、こちらを利用してイベントを発生させる位置を調整できます。0px")のように記述します。0px")になります。0pxの場合0しか記述しないとエラーが出てしまうので、0pxと記述するように注意してください!thresholdsターゲット要素が見えてから、どの位置でイベントを発火させるか調整できます。1や配列を指定できます。0はターゲットが見え初めた瞬間にイベントが発火し、1はターゲットがすべて見えてる状態でイベントが発火します。初期値は0になります。オプションは初期値で良ければ何も記述しなくて大丈夫です!4で要素が表示されたら実行したい関数を記述しています。関数の第1引数にはIntersectionObserverのentryオブジェクトを記述します。entryオブジェクトはIntersectionObserverと一緒に使えるもので、以下のプロパティがあります!boundingClientRectターゲット要素が画面上にどのように表示されているかの情報を返します。具体的にいうと、その要素が画面上でどの位置にあり、どれだけの幅と高さを持っているかを返します。1.0の間の値で返します。intersectionRectターゲット要素が特定の領域に入っている部分の位置やサイズを返します。isIntersectingターゲット要素が特定の領域に入ったらtrueを返し、入っていなければfalseを返します。rootBoundsターゲット要素がどの領域に対して交差を判定しているかを返します。targetターゲット要素を返します。timeターゲット要素と特定の領域が交差状態になった時刻を返します。options);observer.observe(box);さいごに今回はIntersectionObserverを使って簡単にスクロール処理を実装する方法を紹介しました。【GSAP】コピペOK!GSAPカーテンテキストアニメーションJavascriptでHTMLのdata属性を取得して、活用してみた。