Webでエフェクトされたテキストを表示しようと思うと画像を使うのが一般的です。JavaScriptでもできないことはないですが、簡単なものに限定される雰囲気があります。しかしJavaScriptならばアニメーションも行えるメリットがあります。 そこで知っておきたいのがBlotter.jsです。使いどころは限られそうですが、特殊なエフェクトを行えます。

Blotter.jsの使い方

デモです。こんな派手なエフェクトができます。

アニメーションしたり、マウスに追従できます。

アニメーションの例です。うにょうにょと動いています。

他にも色々なパターンがあります。

Blotter.jsはかなり特殊なエフェクトなので、使える場面は限られるかも知れません。しかし、ちょうどマッチする場面もあるのではないでしょうか。アニメーションGIFを使ったり、CSSアニメーションで無理することなくBlotter.jsで実現してみてはいかがでしょうか。

Blotter.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Blotter.js bradley/Blotter: A JavaScript API for drawing unconventional text effects on the web.