Web blog WEBブログ

テキストをタイピング風に一文字ずつ表示する方法

2019.08.12

こんにちは。コーダーの兼山です。

テキストをタイピング風に一文字ずつ表示する方法について紹介します。
メインビジュアル上にあるテキストの演出や、意図的に印象付けたい内容などに効果的です。

テキストをタイピング風に一文字ずつ表示する方法

シンプルな仕組みです。
javascriptで自動的に一文字ごとにspanタグで挟む指定をして、その後、最初のspanタグからだんだんとフェードアニメーションを掛けていきます。

cssでまず全て透過0%に設定し、javascriptで1文字づつフェードインさせます。

まとめ

テキストがアニメーションによって動きがつくと、WEBページの顔とも言える、メインビジュアルの演出をより印象の強いものにできそうですね。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口