最近ではウェブサイトにアニメーションが用いられることが多くなってきており、様々なアニメーション表現が見られるようになりました。今回はJavaScriptとCSSを使って、テキストを1文字ずつ動かすアニメーションを実装してみたいと思います。   ここでは基本的なアニメーション部分はCSSで、テキストを1文字ずつ分割するところをJavaScriptで作成していきますが、今回は1文字ずつ動かす必要があるので、transitionの値を文字ごとに変える必要があるのがポイントです。   それではまずはHTMLを見ていきます。今回はJavaScript側で対象となる文字列を保持しておくので、要素自体は空にしておきます。適宜id属性とclass属性をあてておきます。 【HTML】※一部抜粋

<h1 id="text" class="animation"></h1>

  続いてCSSです、先ほどのHTMLの中に1文字づつ分割したテキストの文字がspan要素として格納されるので、そのspan要素に対してアニメーション効果を設定していきます。今回はフェードインで動きをつけたアニメーションにしていますが、CSSでいろんなバリエーションができますね。 【Sass（SASS）】

.animation 
  span 
    transition-property: transform, opacity
    transition-duration: 0.4s
    transition-timing-function: ease
    transform: translate(-10px, -10px)
    opacity: 0
  &.played
    span
      opacity: 1
      transform: translate(0, 0)

  アニメーション実行時にはclassが付与されるので、アニメーション前の初期スタイルと、アニメーション時のスタイルを用意しておきます。続いてJavaScriptでテキストを分割しアニメーションの準備をしていきます。まずは対象となるテキストを変数に入れておきます。そして、「spilit()」と「slice()」メソッドで1文字単位で値を作成して配列型に変換していきます。 【JavaScript】

const target = document.getElementById('text');
const text = 'HelloWorld!!';
const dataArray = text.split('').slice(0);
const html = dataArray.map((word, index) => {
  return `<span style="transition-delay: ${(index + 1) * 100}ms;">${word}</span>`;
});
html.forEach((element, index) => {
  target.insertAdjacentHTML('afterbegin', element);
});
target.classList.add('played');

  文字単位で配列の値に格納できたら、「map()」メソッドで1文字ずつspan要素で囲んでいきます。この時に、インデックスの値を取得してその値を使って、transition-delayを設定することで、時間差を作ることができ1文字ずつのアニメーションが可能になります。そして最後に元々のHTMLで用意した要素に格納していきます。   実際にこのJavaScriptを実行すると下記のようなHTMLが動的に作成されます。transition-delayが要素単位で個別に設定されているのが確認できます。

<h1 id="text" class="animation">
  <span style="transition-delay: 100ms;">H</span>
  <span style="transition-delay: 200ms;">e</span>
  <span style="transition-delay: 300ms;">l</span>
  <span style="transition-delay: 400ms;">l</span>
  <span style="transition-delay: 500ms;">o</span>
  <span style="transition-delay: 600ms;">W</span>
  <span style="transition-delay: 700ms;">o</span>
  <span style="transition-delay: 800ms;">r</span>
  <span style="transition-delay: 900ms;">l</span>
  <span style="transition-delay: 1000ms;">d</span>
  <span style="transition-delay: 1100ms;">!</span>
  <span style="transition-delay: 1200ms;">!</span>
</h1>

  あとは、ページの読み込み時やボタンクリックなどのトリガーでアニメーション実行用のclassを付与させるとアニメーション効果が走るようになります。実際に作成したサンプルを下記に用意していますのでご参考に。  

See the Pen text_sequential_animation by DesignSupply.LLC (@designsupply) on CodePen.

 

---

  今回はJavaScriptとCSSを使ってテキストを1文字ずつ動かすアニメーションを作成してみました。文字数が少ない場合にはHTMLでハードコーディングしても実現できるのですが、文字数が多くなってくるとこのようにJavaScriptで動的に用意してあげる方がいいですね。配列操作次第で文字の並び替えや、アニメーションの方向なども調整できますので是非試してみてはいかがでしょうか。