「文字にストーリー性を持たせたい」 そんな時に最適なのが、タイプライターのように一文字ずつ文字が現れる「タイピングアニメーション」です。
この記事では、JavaScriptを使わず、CSSだけで実装できる軽量でかっこいいタイピングエフェクトを5つ紹介します。 「Contents」の8文字をベースに作成していますが、文字数に合わせて調整する方法も解説します。SWELLですぐに使えるコードで、サイトに動きを取り入れましょう。
Classic Typewriter（クラシック・タイプライター）
最もオーソドックスなスタイル。文字が打たれた後も、末尾のカーソル（キャレット）が点滅し続け、生きているテキストであることを示します。ホバーするとマーカーが引かれます。
See the Pen Classic Typewriter by BaseKENT (@basekent) on CodePen.
調整方法
- 文字数設定 (
8ch,steps(8)): 「Contents」は8文字なので8chとsteps(8)にしています。文字数を変える場合は、この2箇所の数値を文字数に合わせて変更してください。 - カーソルの色:
border-rightの色を変更するとカーソルの色が変わります。
Loop & Erase（ループ＆イレース）
文字を打っては消し、打っては消す動作を永遠に繰り返します。常に動きがあるため、注目させたい見出しに最適です。ホバーでループが一時停止し、文字が太くなります。
See the Pen Loop & Erase by BaseKENT (@basekent) on CodePen.
調整方法
- 表示時間:
@keyframes typeDeleteの40%, 60%の区間を長くすると、文字が表示されている時間が長くなります。 - スピード:
animationの4sを変更すると、全体のサイクル速度が変わります。
Cyber Console（サイバー・コンソール）
黒背景に緑の文字で、ハッカーの端末（コンソール）のような雰囲気を演出します。カーソルはブロック型です。ホバーすると色が反転します。
See the Pen Cyber Console by BaseKENT (@basekent) on CodePen.
調整方法
- 配色:
colorとbackgroundを変更すれば、白黒のターミナル風などにもアレンジ可能です。 - パディング: 文字周りの余白は
paddingで調整してください。
Smart Underscore（スマート・アンダースコア）
カーソルが「下線（アンダースコア）」になっている、モダンで抜け感のあるデザインです。タイピング完了後も下線が点滅し続け、ホバーすると下線が実線になり、文字が少し浮き上がります。
See the Pen Smart Underscore by BaseKENT (@basekent) on CodePen.
調整方法
- 線の太さ:
border-bottom: 3pxの数値を変更して線の太さを調整します。 - 文字色との兼ね合い: 文字色を薄くし、下線だけ濃くするなどのアレンジもスタイリッシュです。
Hover Re-type（ホバー・リタイプ）
最初は文字が表示されていますが、マウスを乗せると「一度文字を消して、再度タイピングし直す」というインタラクティブな動きをします。ユーザーがつい触りたくなる仕掛けです。
See the Pen Hover Re-type by BaseKENT (@basekent) on CodePen.
調整方法
- 再入力の速度:
1.5sを調整してください。速すぎると何が起きたかわからなくなるので、少し余裕を持たせるのがコツです。 - 初期状態: ページの読み込み時にもアニメーションさせたい場合は、
.type-hover側にもanimation: typing...を追加してください。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
