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

スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt

[coliss]

Intersection Observerを使用してスクロールに連動するアニメーションを実装する方法を解説。

[Rishatang]

「ポートフォリオサイトなどにアニメーションを使用することは、ビジターの目を引き付け、サイトに長く滞在してもらうための素晴らしい方法です。」これってA/Bテストかなにかしてそういうデータ出てるのかな？

[ultimatebreak]

こういうのやるとクライアントが喜ぶんすよ。つまりお金取れるんすわ(ゲス顔

[pribetch]

ぷよぷよフィーバー以降ぷよが着地した時のアニメーションを余計だと感じてしまう勢なのでちょっとな

[kagehiens]

こういうのをやりすぎない程度にしれっと入れ込めると良いなー。

[kijtra]

いつものIE不可のやつだけど、むしろこれ使わないでやってたりするの？

[spark7]

これはアレとしてもObserver系は便利よね

[ifttt]

意外と使いどころが思いつかない動き