Choreographer-jsは、多彩なCSSアニメーションを実現させてくれるシンプルなライブラリです。マウスを動かすことで背景カラーを変化させたり、スクロールすることでアニメーションさせたりと、さまざまな設定が可能です。CSSによるアニメーションを手軽に取り入れたいときに活用してみたいですね。
Choreographer-js
Choreographer-jsの実際のデモページは以下からチェックできます。
下へスクロールしていくと、「CHOREOGRAPHER-JS」と書かれたテキストがアニメーションされます。カラーが変化したり、文字が回転したり、位置が変わったりといろんな変化を楽しむことができます。
ただスクロールしていくだけではなく、アニメーションをつけることでユーザーの注目度も高まりそうですね。また、スクロールでのアニメーションのほかに、マウス動作でのアニメーションのデモも用意されています↓
こちらはマウスを動かすことで背景カラーが変化していきます。マウス動作でのアニメーションを実装したい人にもピッタリですね。
設定項目には、range、selector、type、style、from、toなどといったものがあります。自分好みのCSSアニメーションに仕上げたい人は、ぜひ試してみてはいかがでしょうか。
Choreographer-jsの具体的な実装方法やダウンロードは以下からどうぞ。
