スクロールに連動する機能

スクロールをトリガーにして機能させるものには、

などがあるが、このページで使われる Intersection Observer API には今後を担う簡潔な機能に素晴らしさを感じる。

従来のscrollを使った手法と異なり、変動するビューポート(対象を表示する広さや範囲、領域)の交差ポイントに自動的に反応する。スクロールに関するイベントではないので、スクロールするたびに呼ばれることがなくパフォーマンス面でも軽い。

例えばこれを水平メニューに変更したものであるが、このようにページ内のインデックスのナビゲーションに最適である。

Intersection Observer

Intersection は、「交差点」「交わり」「交差」「横断」「交点」といった、2つ以上の線が交わっている場所を意味する英語である。「交差点」という意味の例文としては、「Take a right turn at the intersection」や「The intersection is closed due to construction」などがある。

「observer」は、観察者や観測者を意味する英語である。一般的には、何かしらの現象や事象、行動を見て理解しようとする人物を指す。また、科学的な観測や研究を行う専門家や、特定の状況やイベントに関与せずに見守る立場の人物も指すことがある。

API

API(Application Programming Interface)とは、接続先のOSを呼び出すことや互いのソフトウェアやアプリケーション機能の一部を共有することである。 APIを通じて連携をすることで、アプリケーション機能を拡張させ、双方のアプリが更に便利になることがメリットだ。

Intersection Observer API

Intersection Observer API（交差オブザーバー API）は、JavaScript の API である。Intersection Observer API は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供する。この祖先要素またはビューポートはルートと呼ばれる。Intersection Observer API を使用すると、要素が指定したポイントに交差したときにのみイベントが発火する。

参考：ICS MEDIA JSでのスクロール連動エフェクトには Intersection Observerが便利2024/02/21

ScrollTrigger

ScrollTriggerとはスクロールに応じてイベントをトリガーしてくれるライブラリである。

このライブラリを利用するにはCDNでscriptを読み込む方法(以下)が便利だ。

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.3/ScrollTrigger.min.js"><script>

<script>
            
            
            const trigger = new ScrollTrigger.default()
            trigger.add('[data-trigger]',
                { 
                    once: false,
                    offset: {
                        viewport: {
                            y: (trigger, frame, direction) => {
                                return trigger.visible ? 0 : .3
                            }
                        }
                    },
                },
            )
		</script>

参考：will style.スクロールに応じてトリガーするJavaScriptのライブラリ「ScrollTrigger」2024/02/21

Scroll-driven

スクロールに連動する機能

Intersection Observer

API

Intersection Observer API

ScrollTrigger