Snip
|
Sadly, animating with JavaScript was limiting and resour... initial foray into an infinitely looping background did ... in my CPU than amaze my friends (although it still looks...
|
---|
Categories |
|
---|
For Snip |
loading snip actions ... |
---|---|
For Page |
loading url actions ... |
Sadly, animating with JavaScript was limiting and resource-intensive. My initial foray into an infinitely looping background did more to burn a hole in my CPU than amaze my friends (although it still looks pretty cool). And there was still no simple way to incorporate audio. The browser technology just wasn’t there.
Things are different now. CSS3 transitions and animations can do most of the heavy lifting and HTML5 audio can serve up the music and audio clips. You can do a lot without leaning on JavaScript at all, and when you lean on JavaScript, you can do so much more!
In this project, I’m going to show you how to animate a simple walk cycle with looping audio. I hope this will inspire you to do something really cool and impress your friends. I’d love to see what you come up with, so please send your creations my way at rachelnabors.com!
HTML |
<p>Sadly, animating with JavaScript was limiting and resource-intensive. <a href="http://www.rachelthegreat.com/ulQuery/">My initial foray into an infinitely looping background</a> did more to burn a hole in my <span class="caps">CPU</span> than amaze my friends (although it still looks pretty cool). And there was still no simple way to incorporate audio. The browser technology just wasn’t there.</p> <p>Things are different now. CSS3 transitions and animations can do most of the heavy lifting and HTML5 audio can serve up the music and audio clips. You can do a lot without leaning on JavaScript at all, and when you lean on JavaScript, you can do so much more!</p> <p>In this project, I’m going to show you how to animate a simple walk cycle with looping audio. I hope this will inspire you to do something really cool and impress your friends. I’d love to see what you come up with, so please send your creations my way at <a href="http://rachelnabors.com">rachelnabors.com</a>!</p> |
---|