jQueryをつかって1文字ずつランダムに表示させるサンプル

このサイトのヘッダーで使っているタイポグラフィーのアニメーションのサンプルをcodepenに載せてみました。

See the Pen Typography by Kentaro Kitagawa (@cdbk) on CodePen.

わかりやすいよう1文字ずつ<span>で囲い、それにクラスをつけて処理を行っているのですが、SEOの面などできになる場合は1文字ずつ<span>をjQueryなどで追記したほうがよいかもしれません。

仕組み

変化させたい文字にクラスをつけ、前から順に配列に格納、配列内をシャッフルしてから1文字ずつ表示させるアニメーションを実行させるようにしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です