Rythim.js

JavaScript

音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライブラリです。具体的なイメージですが、ページ内で流れる音楽(BGM)のリズムに合わせて、設置したボタンなどを躍動的に動かすことができるようになります。例えば、スピーカーのイラストに動きをつけて、そのスピーカーから音楽が流れているように見えるCGなどを見たことがあると思います。あのような動きが、ページ内のボタンに設置することができます。

では、Rythm.jsの詳細を見ていきましょう。

Rythm.js

デモ

使い方はとても簡単です。まず配布サイトよりRythm.js をzip形式でダウンロードし解凍まで行いましょう。

<script type="text/javascript" src="/path/to/rythm.js"></script>
< div class = " rythm-bass " > ボタンなど</ div >
var rythm = new Rythm();
rythm.setMusic("../examples/sample.mp3");
rythm.start();
  • リズムの最小・最大スケール
  • ページごとに使用する音楽
  • 音楽のゲインの調整
  • 音楽を止める
  • 音楽を最初からリスタートさせる

また、カスタムクラスを設定すると、「bass・medium・high」それぞれの音をとらえ、ボタンの動きに反映させることもできるようになります。

音楽好きのWEBクリエイターなら、楽しくノリノリで製作してしまうでしょうね。

Rythim.js

関連記事

  1. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  2. FSVS(Full Screen Vertical Scroller)
  3. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  4. ScrollPress

    JavaScript

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

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

  5. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  6. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP