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

textfit.jsコンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」前のページ

上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」次のページjs-offcanvas

関連記事

  1. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  2. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  3. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  4. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  5. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  6. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP