アニメーションを使って効果的なテキストイフェクト「animate-textshadow.js」
animate-textshadow.jsはjQueryによるアニメーションでテキストイフェクトをするライブラリです。
Web上でユーザアクションによるイベント実行をしたいと思うとJavaScriptを駆使して（またはjQueryのようなライブラリを使って）行うのが一般的です。今回はさらにCSSによるイフェクトを組み合わせたanimate-textshadow.jsを紹介します。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-18 10.53.23.1363611466.png)
デモです。Click meをクリックします。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-18 10.53.26.1363611469.png)
にょきっと影がつきました。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-18 10.53.32.1363611472.png)
マウスオーバーによるアクションもできます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-18 10.53.37.1363611476.png)
単純な影ではなく、周囲に付ける効果もできます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-18 10.53.42.1363611479.png)
一気にぼわっと上にアニメーションが追加されました。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-18 10.53.46.1363611483.png)
マウスオーバーでぼかしから戻すといった処理もできます。
animate-textshadow.jsはテキストのイベントでtextShadowといった指定でイフェクトを指定することでアニメーションを自動で生成してくれます。後は元のスタイルを同様に指定すればフォーカスを外した時に自動で戻る仕組みです。
animate-textshadow.jsはCSS/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
テキストコンテンツはWebの中で最も多いでしょう。太字や色の変更など簡単な文字装飾はHTMLだけでできますが、よりユーザの操作による反応などダイナミックなイフェクトが行えるようになれば目立つのは間違いありません。
コンテンツの状態が変化する際には一瞬で変化してしまうとあまりインパクトがなく気付かれない場合もあります。アニメーションを効果的に取り入れることでユーザビリティを高め、よりコンテンツ提供側の意図が伝わるようになるでしょう。
animate-textshadow.js - Animated CSS text shadows with jQuery | Alex Peattie