chalk-animation

JavaScript

カラフルなアニメーションを実装できる「chalk-animation」

chalk-animationはカラフルなアニメーションによるテキストを実装することができます。テキストがレインボーのように多彩な色に変化するアニメーションやグリッチ表現されたテキストのアニメーションなど、さまざまなタイプのアニメーションパターンが用意されています。

chalk-animation

chalk-animation

デモでは、rainbow、pulse、glitch、radar、neonと全部で5種類のアニメーションを見ることができます。レインボーカラーでアニメーションするテキスト、テキスト全体が一瞬違うカラーに変化するアニメーション、グリッチ表現によるアニメーション、暗闇から光を当てるようにテキストを見せるアニメーション、ネオンのようにテキストが点灯するアニメーションなど、いろんな種類があります。

どのアニメーションも個性的で、テキストにちょっとしたアクセントを加えたいという時に活用したくなりますね。

また、セッティングによりストップ・リスタートのアニメーション時間も指定することができるほか、セカンドパラメーターからアニメーションスピードを変更するといったことも可能です。

というわけで、カラフルなアニメーションやグリッチ表現のアニメーションなどを加えたテキストを実装することができる「chalk-animation」の紹介でした。ライセンスはMITとのこと。

テキストにかっこいいアニメーションを付けて、ユーザーに注目させたいというシーンなどに活用されてみてはいかがでしょうか。

関連記事

  1. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  2. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  3. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  4. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  5. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP