BLOG

Webサイトで文字を少し印象的に見せたいとき、ただフェードインさせるだけでは少し物足りないと感じることはありませんか？

今回は、ランダムな文字がシャッフルされながら、最終的に本来のテキストへ変化していく「スクランブルタイピングアニメーション」の実装方法をご紹介します。

実際にサイトへ組み込めるコードも用意しているので、見出しやキャッチコピーに少し動きを加えたい方は、ぜひ試してみてください。

ランダムな文字から本来のテキストが浮かび上がるアニメーション

今回実装するのは、「スクランブルタイピング」と呼ばれるテキストアニメーションです。

最初は「@#%&!」のようなランダムな文字列が表示され、それがシャカシャカと切り替わりながら、最終的に「Sample Text」のような本来のテキストへ変化していきます。

SF映画でハッキング画面が表示されるような雰囲気や、暗号が少しずつ解読されていくような演出に近いイメージです。

普通に文字を表示するよりも目を引きやすく、サイトの第一印象を少し個性的に見せることができます。

実際の動きとコードはこちら

実際に作成したアニメーションはこちらです。

文字が切り替わるスピードや、途中で表示させるダミーの文字列などを調整することで、サイトの雰囲気に合わせたカスタマイズも可能です。

実装する際のちょっとした注意点

目を引くアニメーションではありますが、長い文章全体にこのアニメーションをかけてしまうと、文字が読めるまでに時間がかかり、ユーザーにとって少しストレスになる場合があります。

そのため、使用する場所は以下のような一瞬で目に入る部分との相性が良いです。

• ファーストビューのキャッチコピー
• サービス名
• キャンペーン文言
• CTA付近のテキスト

まとめ

スクランブルタイピングアニメーションは、サイトに印象的な動きを加えられる演出です。
見出しやキャッチコピーに取り入れることで、サイト全体に少しだけ遊び心や近未来感を加えることができます。

コピペで試せるコードも掲載しているので、気になる方はぜひご自身のサイトでも試してみてください。