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

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

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

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

仕組み

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

トップページのイメージを変更しました。

Cdbknetcreatives201506

トップページのイメージとタイポグラフィーを変更しました。

写真は5月に日光に行った際に撮影したものを使っています。

タイポグラフィーは読み込み後、出てくる処理に変更して少し動きが出るようにしました。

合わせてほかのページの大きな見出しも一部を除いて変更しております。