はじめに

今回は、animate.cssとJavaScriptを組み合わせて、スクロールすることによるテキストアニメーションを考えていきます。

animate.cssとは？

animate.cssは、class名を付けるだけで簡単にアニメーションを実装出来るライブラリを指します。

animate.cssの使い方

animate.cssを読み込む方法は２つあります。今回は、CDNで読み込む方法で進めていきます。

Git Hubからファイルをダウンロードして読み込む
https://github.com/animate-css/animate.css

CDNで読み込む
https://cdnjs.com/libraries/animate.css

animate.cssの記述の仕方

See the Pen サンプル by Uka Suzuki (@uukasuzuki_) on CodePen.

①付けたいアニメーションを探す

②実装する

<div class="animate__animated animate__heartBeat animate__infinite"></div>

アニメーションを付けたい要素に、animate__animated(animate.cssの機能を使うために必ず記載する項目) と animate__heartBeat(選んだアニメーションのクラス名)を付けます。今回は、末尾にanimate__infiniteを付けていますが、これはずっと繰り返すという意味です。

スクロールするとテキストが現れる

See the Pen スクロールするとテキストが現れる by Uka Suzuki (@uukasuzuki_) on CodePen.

JavaScriptのコード解説

document.addEventListener("DOMContentLoaded", function () {
  const elements = document.querySelectorAll(".animate-text");

  const observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          observer.unobserve(entry.target);  // 1回表示されたら監視を解除
        }
      });
    },
    {
      root: null, // ビューポートを基準にする
      rootMargin: "0px 0px -10% 0px", // 表示領域の少し前で発火
      threshold: 0, // 要素が1pxでも見えたら発火
    }
  );

  elements.forEach((element) => {
    observer.observe(element);
  });
});

rootMarginでは、"0px 0px -10% 0px"に設定することで、要素がビューポートに対して下から少し手前でアニメーションが発火するようにします。-10%を変更すると、発火するタイミングを早めたり遅くしたり調整可能です。

observer.unobserve(entry.target)は、要素が一度表示されたら、再び監視しないようにしています。これにより、すでに表示された要素が再びアニメーションしないようにします。

まとめ

今回は、animate.cssとJavaScriptを組み合わせたテキストアニメーションの仕組みについてまとめました。

これらは、今後ポートフォリオサイト制作でも使用する可能性があるため、より実践的に考えながら制作していきたいと思います。