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

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

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

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  3. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  4. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  5. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  6. Blindify

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP