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. Tooltipster

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  2. flexible-bootstrap-carousel
  3. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  4. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  5. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

  6. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP