Choreographer-js

JavaScript

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

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

Choreographer-js

デモ

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

デモ

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

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

Choreographer-js

関連記事

  1. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  2. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  3. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  4. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

  5. Foxholder
  6. no-image

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP