【コピペで簡単】タイピング風のテキストアニメーションをElementorで作るッ！

ちょこっとコードアニメーション

2025-09-08

2025-09-11

前田あゆみ

先日、TOFUラボにてCSSアニメーションの勉強会をさせていただきました！
ありがとうございました！

そこでタイピング風のテキストアニメーションを作りたい、というお声があったので
本日はElementor + ちょこっとコード（CSSとJS）を加えて作る方法を解説してまいります。

もちろんコピペOKです！ご活用くださいませ〜

こんなアニメーションを作ります

See the Pen タイピング風アニメーション by Maeda (@tasogare-design-office) on CodePen.

ちょこっとCSSとJava Script コードを追加すればできますよ〜

まずはElementor で構築

見出しを追加します。

HTMLタグをお好みのものに変えてください！
今回はpにしてます。

ページの見出し　 → h1
セクション見出し → h2〜
装飾用　　　　　 → div, span
文章　　　　　　 → p

コードを追加しよう！

コードの紹介

CSSはカーソルを点滅させるだけで、JavaScriptでアニメーションをかけています！
（コードはもちろんChatGPTに手伝ってもらってます〜）

HTML

<style>
.cursor {
  display: inline-block;
  height: 1.2em; 
  vertical-align:-0.18em; 
  border-right: 1px solid currentColor;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { border-color: transparent; }
}
</style>

<script>
document.querySelectorAll('.typing p').forEach((p) => {
  const originalNodes = Array.from(p.childNodes);
  const elements = [];
  
  originalNodes.forEach((node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      elements.push(...node.textContent.split(''));
    } else if (node.nodeName === 'BR') {
      elements.push('<br>');
    }
  });

  p.textContent = '';
  const cursor = document.createElement('span');
  cursor.className = 'cursor';
  cursor.innerHTML = ' ';
  p.appendChild(cursor);

  let index = 0;
  let animationStarted = false;

  function typeNextChar() {
    if (index < elements.length) {
      const item = elements[index];
      if (item === '<br>') {
        cursor.insertAdjacentHTML('beforebegin', '<br>');
      } else {
        cursor.before(document.createTextNode(item));
      }
      index++;
      setTimeout(typeNextChar, 80); // ←表示速度
    }
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !animationStarted) {
          animationStarted = true;
          typeNextChar();
          observer.unobserve(entry.target);
        }
      });
    },
    {
      root: null,
      rootMargin: '0px 0px -30% 0px', // ←位置調整
      threshold: 0
    }
  );

  observer.observe(p);
});
</script>

<style>
.cursor {
  display: inline-block;
  height: 1.2em; 
  vertical-align:-0.18em; 
  border-right: 1px solid currentColor;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { border-color: transparent; }
}
</style>

<script>
document.querySelectorAll('.typing p').forEach((p) => {
  const originalNodes = Array.from(p.childNodes);
  const elements = [];
  
  originalNodes.forEach((node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      elements.push(...node.textContent.split(''));
    } else if (node.nodeName === 'BR') {
      elements.push('<br>');
    }
  });

  p.textContent = '';
  const cursor = document.createElement('span');
  cursor.className = 'cursor';
  cursor.innerHTML = ' ';
  p.appendChild(cursor);

  let index = 0;
  let animationStarted = false;

  function typeNextChar() {
    if (index < elements.length) {
      const item = elements[index];
      if (item === '<br>') {
        cursor.insertAdjacentHTML('beforebegin', '<br>');
      } else {
        cursor.before(document.createTextNode(item));
      }
      index++;
      setTimeout(typeNextChar, 80); // ←表示速度
    }
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !animationStarted) {
          animationStarted = true;
          typeNextChar();
          observer.unobserve(entry.target);
        }
      });
    },
    {
      root: null,
      rootMargin: '0px 0px -30% 0px', // ←位置調整
      threshold: 0
    }
  );

  observer.observe(p);
});
</script>

※見出しのタグがpではない場合、変更が必要なのでご注意ください！
※タイピングの速度は46行目、開始タイミング62行目で、お好みで調整してください！

サクッと解説

CSS
2-8行目：カーソルのスタイリング、アニメーションを適用
10-12行目：枠線が 0%今の色→50%透明→100%今の色と変化するアニメーション

JS
16行目： typing のクラスを持った要素の中にある pタグを探す
17-26行目：pタグの中にあるテキストや改行を1文字ずつに分解して、配列（elements）に入れる
28-32行目：一旦p の中身を全部消して、代わりに点滅カーソル用のspanを置く
37-48行目：elements に入っている文字を1つずつ取り出して、カーソルの前に追加（80ミリ秒ごと）
50-68行目：pが画面下から30%のところに来たら、アニメーションをスタートさせる