[JavaScript]ちょっと変わったテキストアニメーションを実装する方法[GSAP]

CSS、JavaScript

今回は、文字が一文字ずつ表示されるアニメーションを実装する方法について説明します。

この記事では、HTML、CSS、JavaScriptを使用して、文字がぼやけて拡大から縮小されるアニメーションを実装します。

完成イメージ

See the Pen Text_animation by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

このアニメーションを実装すると、以下のような効果が得られます：

  • テキストが一文字ずつ表示される
  • 文字は最初にぼやけて拡大し、その後くっきりと縮小して表示される

HTMLの設定

まずは、基本的なHTML構造を用意します。
<div>タグ内にアニメーションさせたいテキストを配置します。

<div class="animated-text" id="animatedText">HELLO WORLD!</div>

このコードでは、<div>タグにアニメーションさせたいテキスト「HELLO WORLD!」を配置します。
この<div>タグに対して、後ほどCSSとJavaScriptを使ってアニメーションを適用していきます。

CSSの設定

次に、CSSを使用してテキストのスタイルを定義します。
ここでは、画面中央にテキストを配置し、アニメーションの初期状態を設定します。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.animated-text {
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  gap: 0.2rem;
}

.animated-text span {
  opacity: 0;
  filter: blur(10px);
  transform: scale(10); /* 初期状態で拡大 */
  transition: opacity 0.5s, filter 0.5s, transform 0.5s;
}

ここでは、画面中央にテキストを配置し、アニメーションの初期状態を設定します。

それぞれのCSSの説明

body

  • 画面中央にテキストを配置するため、display: flex、justify-content: center、align-items: centerを使用しています。
  • 高さを100vh（ビューポートの高さ）に設定し、背景色を薄いグレーに設定しています。

.animated-text

  • フォントサイズ、フォントウェイト、文字間のギャップを設定しています。

.animated-text span

  • 初期状態で文字を透明、ぼやけ、拡大状態に設定し、トランジションの効果を定義しています。

JavaScriptの設定

最後に、JavaScriptを使用してアニメーションを制御します。以下のスクリプトを使用して、テキストを一文字ずつ表示させます。

document.addEventListener("DOMContentLoaded", function () {
  const text = document.getElementById("animatedText").textContent;
  const container = document.getElementById("animatedText");
  container.innerHTML = "";

  for (let i = 0; i < text.length; i++) {
    const span = document.createElement("span");
    span.textContent = text[i];
    container.appendChild(span);
  }

  const spans = container.querySelectorAll("span");
  spans.forEach((span, index) => {
    setTimeout(() => {
      span.style.opacity = 1;
      span.style.filter = "blur(0)";
      span.style.transform = "scale(1)"; // 縮小
    }, index * 100); // Adjust the timing (100ms) as needed
  });
});

このJavaScriptコードでは、以下の処理を行っています

それぞれのスクリプトの説明

DOMContentLoadedイベント

  • ページの読み込みが完了した後にアニメーションを開始するために使用します。

テキストの取得と分割

  • document.getElementById("animatedText").textContentを使って、アニメーションさせたいテキストを取得します。
  • container.innerHTML = "";で、コンテナの内容を空にして準備します。
  • forループでテキストを一文字ずつ<span>タグに包み、コンテナに追加します。

アニメーションの適用

  • container.querySelectorAll("span")で全ての<span>タグを取得し、各文字に対して指定したタイミングでアニメーションを適用します。
  • setTimeoutを使用して、各文字の表示タイミングを調整し、span.styleを使って透明度、ぼかし、縮小を設定します。

備考

このコードを使用することで、簡単に動的なテキストアニメーションを実装することができ、ローディングのアニメーションなどに利用できると思います。
ただ、このままのコードですと、述べた通りローディングなどにしか使えません。
見出しなどに同様の効果を持たせたい場合はGSAPなどを利用しトリガーの設定をして下さい。
以下、GSAPを利用したサンプルとなります

サンプル

See the Pen Text_animation_Blur_Scroll by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen. 

gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", function() {
  // テキスト要素の取得
  const text = document.getElementById("animatedText").textContent;
  const container = document.getElementById("animatedText");
  container.innerHTML = ""; // テキストを空にする

  // テキストを1文字ずつスパン要素に分割してコンテナに追加
  for (let i = 0; i < text.length; i++) {
    const span = document.createElement("span");
    span.textContent = text[i];
    container.appendChild(span);
  }

  // スパン要素をGSAPの配列に変換
  const spans = gsap.utils.toArray("#animatedText span");

  // 各スパン要素に対してアニメーション効果を設定
  spans.forEach((span, index) => {
    gsap.set(span, { opacity: 0, filter: "blur(10px)", scale: 10 }); // 初期のスタイル設定

    ScrollTrigger.create({
      trigger: span, // トリガーとなる要素
      start: "top 250px", // アニメーションが開始する位置
      onEnter: () => {
        gsap.to(span, { opacity: 1, filter: "blur(0)", scale: 1, duration: 0.5, delay: index * 0.1 }); // アニメーションの設定
      },
      markers: true // デバッグマークの表示
    });
  });
});

テキストの分割とスパン要素への設定

各文字に対して、初期状態でのスタイル（opacity、filter、scale）を設定し、ScrollTriggerを使用してスクロール位置に応じたアニメーションを追加します。

const spans = gsap.utils.toArray("#animatedText span");

spans.forEach((span, index) => {
  gsap.set(span, { opacity: 0, filter: "blur(10px)", scale: 10 });

  ScrollTrigger.create({
    trigger: span,
    start: "top 250px",
    onEnter: () => {
      gsap.to(span, { opacity: 1, filter: "blur(0)", scale: 1, duration: 0.5, delay: index * 0.1 });
    },
    markers: true // デバッグマークを表示（デバッグ用）
  });
});

デバッグ用マーカーの表示

最後に、デバッグのためにScrollTriggerがどの部分でアニメーションをトリガーするかを示すマーカーを表示します。これは実際のアニメーションには不要ですが、開発時に役立ちます。

markers: true

このコードを利用することで、範囲内にスクロールするとテキストのアニメーションが開始される様になります。

まとめ

いかがでしたか？

今回はJavaScriptを使って、少し変わったテキストアニメーションの方法をご紹介させていただきました。
ウェブページのデザインに新しい可能性を広げることができるので、もしよければお試し下さい！

タイトルとURLをコピーしました