Choreographer-js

JavaScript

多彩なCSSアニメーションを実現できる「Choreographer-js」

Choreographer-jsは、多彩なCSSアニメーションを実現させてくれるシンプルなライブラリです。マウスを動かすことで背景カラーを変化させたり、スクロールすることでアニメーションさせたりと、さまざまな設定が可能です。CSSによるアニメーションを手軽に取り入れたいときに活用してみたいですね。

Choreographer-js

デモ

下へスクロールしていくと、「CHOREOGRAPHER-JS」と書かれたテキストがアニメーションされます。カラーが変化したり、文字が回転したり、位置が変わったりといろんな変化を楽しむことができます。

デモ

こちらはマウスを動かすことで背景カラーが変化していきます。マウス動作でのアニメーションを実装したい人にもピッタリですね。

設定項目には、range、selector、type、style、from、toなどといったものがあります。自分好みのCSSアニメーションに仕上げたい人は、ぜひ試してみてはいかがでしょうか。

Choreographer-js

関連記事

  1. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  2. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  3. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  4. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  5. no-image
  6. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP