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

テキストをアニメーション化するライブラリはこれまでにもありました。多いのはタイプライター風に文字を表示するものや、点滅させたり、文字色を変化させると言ったものもあります。

今回はさらに高度なテキストアニメーション機能を追加するLetterboltを紹介します。アニメーションしながら文字が書かれていくという、面白いライブラリです。

Letterboltの使い方

下の部分がアニメーション対象です。ちなみにスクロールでアニメーションするようになっています。
下の部分がアニメーション対象です。ちなみにスクロールでアニメーションするようになっています。

スクロールします。徐々に文字が書かれていくのが分かります。
スクロールします。徐々に文字が書かれていくのが分かります。

上の方ははっきりと書かれました。下はまだ途中。
上の方ははっきりと書かれました。下はまだ途中。

インスペクタで表示。SVGで文字を描いているようです。
インスペクタで表示。SVGで文字を描いているようです。

Letterboltの使い方は簡単です。

<h2 class='lb giant scrolled'> some writing </h2>

こんな感じにクラスを定義する程度で、テキストは普通に書けます。スクロールでアニメーションしたい場合はscrolledを定義します。後は文字の大きさを指定します。

ロゴをアニメーションさせたりする場合、アニメーションGIFを使うのが一般的でしたが、今後はLetterboltも検討に入れても面白そうですね。

LetterboltはHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

buseca.github.io/letterbolt/

buseca/letterbolt

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2