This went from a fun Saturday project inspired by a suggestion from my brother to a weekend-long, no-holds-barred tapping into some of the more powerful browsers’ HTML5 and CSS3 feature sets within the context of AngularJS. Check out the full screen app here.
Features
- Responsive
- Can update the tempo while metronome is on (try tabbing focus to the bob, then using arrow keys to move it while it is swinging)
- HTML5 Audio API
- CSS animation
- Fancy but not very practical source code view buttons to the right. (Just View Source or see the fiddle, it’s much easier lol.)
Libraries, frameworks, etc.
Compatibility as of 12/31/2012
Windows
- Chrome 23.0 all features OK
- Firefox 17.0 all features OK
- Safari 5.1.7 all features except audio OK
- Opera 12.12 all features OK
- IE 10 nothing appears (due to use of background-size + background-position?)
OS X
- Chrome, Safari all features OK
Mobile
Pshhh… Yea, right! Firefox and Opera on my Android are close but are missing key features.
Other
Used Ceaser CSS Easing Tool to create the custom
easing function for the wand “return to center” animation.