Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。Keerthi下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。完成はじめにポートフォリオサイトなどにアニメーションを使用することは、ビジターの目を引き付け、サイトに長く滞在してもらうための素晴らしい方法です。この記事では、ビジターが下や上にスクロールしたときに動作する特別なタイプのアニメーションをサイトに追加する方法を解説します。Observerという機能を使用します。カードUIをHTMLとCSSで実装する最初に、基本的なカードUIのHTMLマークアップとスタイリングをレイアウトしましょう。here....</p></div></div></body><html>外部CSSのstyle.cssは、下記のようになります。15px;}上記のCSSでは、background-imageをグラデーションに設定しました。);ここまでの実装で、下記のように表示されます。CSSに基本的なアニメーションを追加する次に、キーフレームアニメーションを使用してCSSにいくつかの基本的なアニメーションを追加しましょう。1;}}上記のCSSには、2つのキーフレームアニメーションがあります。...}キーフレームアニメーションは、CSSのセレクタで呼び出すことができます。infinite;}上記のCSSでは、どちらも2秒間実行され、無限にループするように定義しています。これらのアニメーションは、要素の水平方向のx値に対する単純なトランジション/トランスレートです。画像には伸縮アニメーションを追加します。CSSは下記の通りです。1);}}このアニメーションは、Animistaというオンラインのアニメーションジェネレーターで作成しました。このジェネレーターでは、他のアニメーションを試すこともできます。使い方は簡単で、キーフレームのコードを生成してくれるので、それをアニメーションさせたいコンテナに適用するだけです(上記のように)。ここまでの実装は、CodePenで確認できます。CodePen.ここまでは、CSSでアニメーションを制御していましたが、スクロールに連動するアニメーションを実装するにはJavaScriptを使用する必要があります。それに合わせてHTMLとCSSにもいくつかの変更が必要です。Observerを使用する前に、HTMLに変更を加えるJavaScriptでアニメーションを動作させる際にポイントとなるのが、アニメーションのキーフレーム関数名と適用すべきルールへのアクセスです。今回の実装では、下記のCSSルールで実現しています。infinite;}これをjavaScriptで動的に適用するには、これらのCSSを破棄し、HTMLのdata属性を使用して上記のアニメーション値を保存する必要があります。アニメーションさせる3つの要素には、.animateというクラスを付けます。したがって、カードのHTMLを下記のように変更します。ここでは、data-animateというdataアイテムを作成し、その値をcssで定義したアニメーションに設定しています。不思議な感じがしますが、data属性の使い方についてはMozilla.orgをご覧ください。スクロールしてアニメーションを起動できるように、さらにコンテンツを追加する必要があるので、カードのラッパーをさらに3つ複製します。Observerは基本的には、指示された要素を観察します。対象となる要素と祖先の要素との交点(Intersection)の変化を観察します。APIについは、下記をご覧ください。通常はルート要素を定義しますが、今回のケースでは、ブラウザのビューポートをデフォルトにしたいので、ルート要素を定義していないことに注意してください(ルート要素を定義しない場合、祖先をルートとみなします)。いうわけで、今回のユースケースの基本的なコード構造は下記のようになります。{observer.observe(item)})</script>このコードをHTMLの中で、bodyタグ内の一番最後に追加します。簡単に説明すると、4つのステップがあります。Observerオブジェクトを作成する。監視したいアイテムを照会して選択する。Observerオブジェクトのウォッチリストに追加する。交差イベントが発生するたびに何かを実行するコールバック関数を提供する。この場合、キーフレームアニメーションを添付する必要があります。上記のコードでは、コールバック関数のコードを記述していません。これが次の作業となります。viewentry.target.style.animation="none";}});}このコールバックは、交差が発生するたびに呼び出されます。コールバックは、オブザーバーのリストにあるすべての要素にアクセスします。コールバックでは、どの要素が交差したかをループして調べます。そのためには、要素にあるisIntersectingというフラグをチェックします。if文を確認すると、これがわかります。{...}交差している場合は、キーフレームアニメーションを要素にアタッチし、次の行がそれを行います。3で設定したdata-animateというdata属性を取得して設定します。画像の場合は、要素のマークアップのdata属性から文字列の部分を取得します。コードのelseの部分は、アニメーションが交差していないため、アニメーションを削除しますJavaScriptentry.target.style.animation="none";1entry.target.style.animation="none";これで前後にスクロールすると、アニメーションが再び実行されます。実際の動作は、下記のCodePenでご覧ください。Posts関連記事が見つかりませんでした。