ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webは基本的に静的なものです。アニメーションを使うこともできますが、何度も繰り返したり、マウスクリックのタイミングでアニメーションが実行される程度です。よりインタラクティブ性が欲しいと思ったことはないでしょうか。

そこで紹介したいのがRythm.jsです。なんと音声に反応するアニメーションライブラリです。

Rythm.jsの使い方

こちらはWebサイト内にある音楽ファイルに反応して動きます。まるでスピーカーのように動きます。

もう一つはマイクロフォンに連動して動くものもあります。

音がないと分かりづらいので、ぜひサイトを見てください。音楽や音声入力に合わせてDOMが動くというのは面白い感覚です。単純なアニメーションと違い、よりインタラクティブな面白さが感じられるでしょう。

Rythm.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(GPL v3)です。

Rythm.js by Okazari

Okazari/Rythm.js: Make your page dancing.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2