bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScript音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」JavaScript2017.03.2音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライブラリです。具体的なイメージですが、ページ内で流れる音楽(BGM)のリズムに合わせて、設置したボタンなどを躍動的に動かすことができるようになります。スピーカーのイラストに動きをつけて、そのスピーカーから音楽が流れているように見えるCGなどを見たことがあると思います。あのような動きが、ページ内のボタンに設置することができます。Rythm.jsの詳細を見ていきましょう。デモ使い方はとても簡単です。zip形式でダウンロードし解凍まで行いましょう。下記のようにjsファイルを読み込みます。src="/path/to/rythm.js"></script>そして、動きをつけたい要素に下記のように[rythm-bass]クラスを追加します。>使用する音楽(BGM)についてですが、その音楽のURLを、Rhythmオブジェクトを作成したうえに、指示します。下記のようになります。Rythm();rythm.setMusic("../examples/sample.mp3");rythm.start();さらに、このRhythm.jsの優れているところは、リズムや音楽に関する設定が細かく指示できることです。音楽を止める音楽を最初からリスタートさせるまた、カスタムクラスを設定すると、「bass・medium・high」それぞれの音をとらえ、ボタンの動きに反映させることもできるようになります。音楽好きのWEBクリエイターなら、楽しくノリノリで製作してしまうでしょうね。最後に、Rythm.jsは現在も開発中のライブラリです。今後も要チェックです。ダウンロードや詳しい使い方は以下からどうぞ。Pinは軽量なスティッキー要素を実装できるjQueryプラ...JavaScript流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」Granim.jsは美しく変化するグラデーションのアニメーションを実装...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。