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

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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2