タイピング演出付きヒーロー
タイピング演出付きヒーローは、見出しがタイプライターのように 1 文字ずつ表示されるヒーローです。 .hero-tw__type に overflow:hidden と white-space:nowrap を当て、 @keyframes hwType で要素の width を 0 から 18ch まで steps…
解説
タイピング演出付きヒーローは、見出しがタイプライターのように 1 文字ずつ表示されるヒーローです。.hero-tw__type に overflow:hidden と white-space:nowrap を当て、@keyframes hwType で要素の width を 0 から 18ch まで steps(20) で段階的に広げることで、文字が順に現れる効果を作っています。右端の border-right は hwBlink で点滅させ、入力中のカーソルを表現します。等幅フォントとターミナル風の配色がコード感を強めています。
向く場面
- 開発者向けツールや API サービスのトップ
- テック系スタートアップでスピード感を出したいとき
- コンソール風の世界観を持たせたい LP の導入
表示する文字数を変えたら、width:0;animation:hwType の終点 18ch と steps(20) の数をテキストの長さに合わせて調整します。ここがずれると文字が欠けたり余白が出ます。速度は 2.5s の値で調整できます。CSS だけのため、見出しのテキスト自体は HTML に存在し、検索エンジンや読み上げにはアニメーションに関係なく全文が伝わります。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
見出しの文字を変えたら表示が欠けます。なぜ？
タイピング幅を 18ch、刻みを steps(20) で固定しているためです。文字数を変えたら、終点の 18ch と steps の数を新しいテキストの長さに合わせて変更してください。
タイピングの速度を変えるには？
.hero-tw__type の animation で指定している 2.5s を変更します。秒数を小さくすると速くタイプされ、大きくするとゆっくり表示されます。