Choreographer-js

JavaScript

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

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

Choreographer-js

デモ

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

デモ

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

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

Choreographer-js

Reframe.js特定の要素をレスポンシブ化してくれる「Reframe.js」前のページ

立体的に回転するテンプレート「3D Portfolio Template」次のページ3D Portfolio Template

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  2. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

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

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  4. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  5. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  6. jQuery ui material design datepicker

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP