全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
テキストをタイピング風に一文字ずつ表示する方法
2019.08.12
※この記事は2019年08月12日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
テキストをタイピング風に一文字ずつ表示する方法について紹介します。
メインビジュアル上にあるテキストの演出や、意図的に印象付けたい内容などに効果的です。
【目次】
テキストをタイピング風に一文字ずつ表示する方法
シンプルな仕組みです。
javascriptで自動的に一文字ごとにspanタグで挟む指定をして、その後、最初のspanタグからだんだんとフェードアニメーションを掛けていきます。
cssでまず全て透過0%に設定し、javascriptで1文字づつフェードインさせます。
まとめ
テキストがアニメーションによって動きがつくと、WEBページの顔とも言える、メインビジュアルの演出をより印象の強いものにできそうですね。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
