ITエンジニア/デザイナ向けにオープンソースを毎日紹介

animate-textshadow.jsはjQueryによるアニメーションでテキストイフェクトをするライブラリです。

Web上でユーザアクションによるイベント実行をしたいと思うとJavaScriptを駆使して(またはjQueryのようなライブラリを使って)行うのが一般的です。今回はさらにCSSによるイフェクトを組み合わせたanimate-textshadow.jsを紹介します。


デモです。Click meをクリックします。


にょきっと影がつきました。


マウスオーバーによるアクションもできます。


単純な影ではなく、周囲に付ける効果もできます。


一気にぼわっと上にアニメーションが追加されました。


マウスオーバーでぼかしから戻すといった処理もできます。

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

alexpeattie/animate-textshadow · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2