キーボードで操作できるSVGのドラムアニメーションが凄い!

cap001

SVG画像とJavaScript、html5のaudio要素で実装されたドラムキットのアニメーションを紹介します。

まずは、こちらのデモをご覧ください。

キーボードでドラムを操作することができます。
cap002

さらに、右上のタイルメニューを押すと、、、
cap006

ドラムを叩くタイミングや全体のテンポを指定して、ドラムを演奏することができます。
cap005

タイミングを指定したら、再生ボタンを押すだけで自動演奏ができます。
cap003

SVG画像とJavaScript、html5のaudio要素だけで実装されています。ここまで作り込んでいるのは、凄いですね。

JavaScriptでは、jQueryの他に、TweenMaxというアニメーションライブラリが使用されています。

TweenMaxは、Googleも推奨しているアニメーションライブラリで、jQueryのanimateメソッドよりも動作が高速で安定しているのが特徴です。

実装方法も詳しく紹介されているので、興味のある方はご覧ください。
How to Create an Interactive Animated SVG Drum Kit

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

  • Posted on
  • Updated on
  • Views 619