スタイルシートが強力になっていくのに合わせてテキストだけでできることの範囲がどんどん広がっています。アニメーション処理もHTMLだけでできてしまうくらいです。 そこで今回はテキストを使った面白い表示をサポートしてくれるfunnyText.jsを紹介します。特に難しい使い方はなく、テキストアニメーションが実現します。 画像だと分かりづらいので動画で紹介します。

$(document).ready(function() {
  $('.text1').funnyText({
    speed: 700,
    activeColor: '#fff',
    color: 'black',
    fontSize: '8em'
  });
  $('.text2').funnyText({
    speed: 700,
    fontSize: '7em',
    color: '#191919',
    activeColor: '#fff',
    borderColor: 'black'
  });
});

フォントサイズやアニメーション速度、色を設定するだけで使えます。不規則な動きはユーザの目を引くので、最初のインパクトを求めるコンテンツに使ってみると面白いかもしれません。 なお、funnyText.jsは動的にスタイルタグを書き込んでアニメーションさせながら文字を入れ替える方法をとっているようです。CSS3をうまく使うとこんなイフェクトも実現できるのですね。 funnyText.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 funnyText.js alvarotrigo/funnyText.js