スクロールに合わせた
見出しテキストのアニメーション。

さまざまなCSSに対応できます。

こんにちは、「ふ」です。
前回の記事⬇︎では、<h2>などの見出しをSVGで装飾し、アニメーションさせました。

SVGで巻物アニメーション。

テキスト要素をSVGで装飾。

こういった見出しテキストのアニメーションを、ユーザのスクロールに合わせて発生するように実装してみましょう。ページ内の見出しは１つとは限りませんので、当然複数の要素に対しても対応させていきます。

内容が複雑になり過ぎないよう、今回は簡単なCSSアニメーションを使って進めていくことにしました。
このページのタイトル部分にあるような、ユーザのスクロールに対して<h2>の見出し領域が、


　・画面に入ったら左から要素が登場
　・画面から出そうになったら左へ消えていく


というものを作っていきます。

この仕組みを使えば、前に紹介した巻物アニメーションに取り入れるのはもちろんのこと、さまざまなCSSプロパティを「ユーザのスクロールに合わせて変化させる」ことができます。

学習して色々とアレンジしてみてください。

要素とCSSを準備。

それではベースとなる要素を、HTMLとCSSで書いていきましょう。

.space { height:80%; background-color:cadetblue; } .midasi { background-color:beige; padding:1em; }

見出しとして<h2>要素を２つ、距離をとるための余白「.space」を配置しました。
「.space」をおいたのはサンプル用で、実際のwebページで実装する際には必要ありません。

その上で見出し要素についてはtransform:translateXを使い、画面の左外に動かしておきます。

.midasi { background-color:beige; padding:1em; 「「１transform:translateX(-100%);」」 }

見出しが画面の外に隠れました。
初期状態のコーディングはこれでOKです。

追加用のclass。

見出しが画面に入ったとき、そして画面から出ていきそうなときのアニメーションをCSSに付け加えます。

.deru { animation:deru 1s 「「１forwards」」; } @keyframes deru { to { transform:translateX(0%); } }

見出しが左から入ってくるアニメーションです。
キーフレームについてですが、先ほど見出し要素はtranslateXで画面の左外に追いやりました。そのためto（終了時の状態）をtranslateX(0%)とすれば左外から定位置に戻ってくるようになります。

animation関数に「forwards」を指定するのを忘れないようにしてください。
これはCSSアニメーションが完了後、「終了時の状態を保持する」という指定です。これがないと、出てきた見出し要素がアニメーション完了後、直ちに左外に消えてしまって「見出し」の意味をなさなくなってしまいます💧

　詳しくはこちら⬇︎。

• CSSアニメーション09、animation-fill-mode。
  

  アニメーション終了時の状態を維持したり。

.modoru { animation:modoru 1s 「「１forwards」」; } @keyframes modoru { from { transform:translateX(0%); } }

もう１つは要素が画面から出そうなときのアニメーションclass「.modoru」です。
開始時の状態をtranslateX(0%)、つまり定位置の状態にしておけば、アニメーションが進行するにしたがって要素は左外へと消えていきます。

これら２つのclassは現在、どの要素にも指定していません。
次に実装するIntersectionObserverを使って、見出しが画面に入る/出るタイミングでclassを付け加えてアニメーションさせます。

observerでclassを付与。

それではJavaScriptのIntersectionObserverを使い、スクロールにアニメーションが対応するよう実装していきます。

「「３//すべての見出しを取得」」「「１ ..@1@」」 const midasis = document.querySelectorAll(".midasi"); 「「３//ルートの上下を少し狭くする」」「「１ ..@2@」」 let options = ｛ bbrootMargin:"-15% 0% -15% 0%" bb｝; 「「３//IntersectionObserverを生成」」「「１ ..@3@」」 const observer = new IntersectionObserver(callback,options); 「「３//すべての見出しを監視対象に」」「「１ ..@4@」」 midasis.forEach(function(value) ｛ bbobserver.observe(value); bb｝); 「「３//コールバック関数」」「「１ ..@5@」」 function callback(entries) ｛ bb「「３//交差フラグが立ったすべての要素に」」「「１ ..@6@」」 bbentries.forEach(function(value) ｛ bbbb「「３//画面に入るときと出るときを場合分け」」「「１ ..@7@」」 bbbbif(value.isIntersecting) ｛ bbbbbb「「３//classの追加と削除」」「「１ ..@8@」」 bbbbbbvalue.target.classList.remove("modoru"); bbbbbbvalue.target.classList.add("deru"); bbbbbb｝ else ｛ bbbbbbvalue.target.classList.remove("deru"); bbbbbbvalue.target.classList.add("modoru"); bbbbbb｝ bb｝); ｝

@1@ midasiクラスのすべての要素を取得。

@2@ このあと記述するIntersectionObserverのオプションです。
Observerの監視範囲の初期値は「上下左右0%」、つまり画面いっぱいに広がっています。そうすると「.modoru」のアニメーションは要素が画面外に出たときに初めて発動することとなり、ユーザに見せることができなくなってしまいます。
そのためrootMarginプロパティで、監視範囲の上下を15%ずつ狭くしておきました。

@3@ IntersectionObserverのインスタンスを生成。

@4@ forEachメソッドを使うことで、すべての見出し要素を監視対象に指定します。

@5@ 交差判定が発生したときに呼び出されるコールバック関数です。

@6@ 交差判定が発生するのは１つの要素だけとは限りません。
たとえば「#midasi1」が画面から出るのと同時に「#midasi2」が画面に入ってくる、などということも考えられます。そのため交差フラグが立ったときに対象となる要素のすべてに処理を施せるよう、ここでもforEachメソッドの中に関数を記述しています。

@7@ 要素が画面に入るとき/出るときでアニメーションの種類を使い分けるため、条件分岐します。
isIntersectingは、observerの監視範囲に要素が入っているかどうかの真偽値を返します。

@8@ 要素に対して不要なclassを削除、必要なclassを追加しています。
現在引数valueにはentries（交差情報）が入っているので、value.targetで要素本体を参照しましょう。

完成です。上下にスクロールしてみてください⬆︎。
画面に入ったり出そうになったりするに反応して、それぞれの見出しが出てきたり引っ込んだりします。

細かなタイミングなどを調整して、お好みのものに仕上げてください ♪

２つのアニメーションで効果的に。

最後までお読みくださり、ありがとうございました。
IntersectionObserverを使ったCSSアニメーションの発火については以前の記事でも取り上げていたのですが、そのときは「要素が画面に入ったとき」だけのアニメーション実装でした。

今回はそれに加え「要素が画面から出そうなとき」のアニメーションも実装したことで、より動き豊かなものができたかと思います。こういった「脇役部分のアニメーション」を加えることで、完成度を上げることができるんですね。

皆さんの作ったCSS/SVGアニメーションにも、この動きを取り入れてみてください。
ではまた〜 ♪