知ったかぶりエンジニアの開発ブログ

~学んだことをアウトプット~

【JavaScriptライブラリ】リズムによって要素を踊らせる"Rythm.js"

はじめに

ちょっと面白いJavaScriptのライブラリを発見したので使い方を紹介します。
以下のRythm.jsを使うと画像、文字、ボタンなどが
ページに流れる音楽のリズムに合わせて動かすことができます。
okazari.github.io

音楽のテンポによって動きが変わるので色々なリズムの音楽を試すと面白いです。

使い方

とても簡単で、githubからRythm.jsを取得します
github.com

取得したjsファイルを読み込ます。
<script type="text/javascript" src="./rythm.js"></script>

音楽を鳴らすタイミングで以下の処理を記載します。

  var rythm = new Rythm();
  rythm.setMusic("鳴らせる音楽を指定");
  rythm.start();

動かしたい画像などの要素に対して以下のclassを設定します。
class="rythm-bass"

動きのテンポを変更したい場合はrythm-mediumrythm-highで変えられます。

またaddRythmの関数を使うことで独自にリズムを変更することができます。

以上で完了です。
面白いJavaScriptのライブラリですので是非遊んでみてください。

Web開発をする際にインストールしておくと便利なソフトウェア9選

この記事は以下に移行しました。 review-info.net ほかの記事も順次移行して、このブログを閉鎖予定なので、 https://review-info.net をブックマークしていただけると幸いです。

【PostgreSQL】XMLとJSON型の操作について

この記事は以下に移行しました。 review-info.net ほかの記事も順次移行して、このブログを閉鎖予定なので、 https://review-info.net をブックマークしていただけると幸いです。

【PostgreSQL】Windows版インストール手順

この記事は以下に移行しました。 review-info.net ほかの記事も順次移行して、このブログを閉鎖予定なので、 https://review-info.net をブックマークしていただけると幸いです。

【SourceTree】ソース改修からプッシュの方法

手順

ソースの改修を行うと、「作業ツリーファイル」に追加されます
f:id:toxapex0748:20210711102121j:plain

commitするファイルを選択して「選択をインデックスに追加」をクリックします。
コマンドとしては $ git add [ファイル名] の意味です
f:id:toxapex0748:20210711100118j:plain

「Indexにステージされたファイル」がコミットの対象になります。
コミットの際に、プッシュも同時にする場合には
「変更をすぐにorigin/mainにプッシュする」を選択しておきます。

コミットはコメントを書いて右下の「コミット」をクリックします。
f:id:toxapex0748:20210711100133j:plain

コマンドとして
$ git commit -m "first commit"
$ git push origin main
となります