login/register

Snip!t from collection of Alan Dix

see all channels for Alan Dix

Snip
summary

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...
Things are different now. CSS3 transitions and animation ...
In this pro

24 ways: Flashless Animation
http://24ways.org/2012/flashless-animation/

Categories

/Channels/techie/css

[ go to category ]

/Channels/techie/web development

[ go to category ]

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&#x2019;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&#x2019;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&#x2019;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>