chalk-animation

JavaScript

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

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

chalk-animation

chalk-animation

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

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

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

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

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

Sticky Multi Header Scrollスクロールで複数のコンテンツの見出しをスタックしていける「Sticky Multi Header Scroll」前のページ

豊富なCSSアニメーションエフェクトを実装できる「effect.css」次のページno-image

関連記事

  1. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  2. jquery.autoscroll-text-tape
  3. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  4. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  5. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP