Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2021.02.27

JavaScriptとCSSで手軽にテキストを1文字ずつ動かすシンプルなアニメーションを実装する

Tags: ,,,

最近ではウェブサイトにアニメーションが用いられることが多くなってきており、様々なアニメーション表現が見られるようになりました。今回は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で動的に用意してあげる方がいいですね。配列操作次第で文字の並び替えや、アニメーションの方向なども調整できますので是非試してみてはいかがでしょうか。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?