こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
WebサイトやLP（ランディングページ）で、「タイプライター風」のアニメーションを見たことがあるでしょうか？
例えば、「ようこそ！」や「WEBデザインならお任せください」などのキャッチコピーが、1文字ずつ表示される演出です。
このようなアニメーションは、視線を集めやすく、動きがあることでユーザーの興味を引きやすいメリットがあります。
そこで今回は、HTML・CSS・JavaScriptを使って「タイプライター風の文字アニメーション」を実装する方法を紹介します。
シンプルなタイプライター風アニメーション
まずは基本的なタイプライター風アニメーションを作ってみましょう。
以下のコードを使うと、1文字ずつ表示されるアニメーションが簡単に作れます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、JavaScriptで1文字ずつ追加していくことで、タイプライター風のアニメーションを再現しています。
カーソルを点滅させる
本物のタイプライターのようにカーソルを点滅させる演出を加えると、よりリアルな表現になります。
以下のCSSを追加してください。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このアニメーションを加えることで、カーソルが点滅し、より本格的な演出ができます。
複数のメッセージをループさせる
「1つのメッセージだけではなく、いくつかのメッセージを順番に表示したい」という場合のコードを紹介します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このスクリプトでは、メッセージを表示 → 2秒間表示 → 消去 → 次のメッセージを表示という流れを繰り返します。
まとめ
- 基本のタイプライター風アニメーションを実装する方法
- カーソルの点滅を追加する方法
- 複数のメッセージをループさせる方法
タイプライター風アニメーションを使うことで、サイトの見た目に動きを加え、訪問者の興味を引きつけることができます。
特にキャッチコピーやメッセージを強調したい場面におすすめです！
静岡県浜松市の企業様向けにWebサイト制作をサポートしています。
「動きのあるデザインを取り入れたい！」とお考えの方は、ぜひsatokotadesignにお任せください！
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
