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. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP