スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる | コリス

2021/07/13 168 users コリス ビューポート スクロール アニメーション ライブラリ

スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using ... 続きを読む

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

2019/09/02 197 users ICS MEDIA Inter エフェクト スクロール API

ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではInter... 続きを読む

[JS]これなら簡単で便利！要素がビューポートに表示されているかを判定できる -Intersection Observer | コリス

2017/08/10 65 users ビューポート getBoundingClientRect

スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方... 続きを読む