04
Jun
Animating divs using jquery
Posted by Sam Clarke on Friday Jun 4, 2010 Under Development, Toasted Digital, html5, jqueryOne of the big decisions I’ve had to make over the past few months with regards the new Toasted Digital website is Flash or no Flash. A large part of the work I do is Flash based, therefore it seems appropriate to display my portfolio in that format. However the internet is changing, and Flash while a big part of the work I do is generally not my favorite thing to use for full websites anyway. The downsides of its SEO capabilities and incompatibility with apple products can be frustrating. So I’ve decided to run a few experiments and tests using jquery to animate divs. I’ve seen a few examples around the net but can jquery alone give me the level of animation I need to make my website? I’ve not yet seen an example of sophisticated animation using jquery as an alternative to Flash, but the animation required for my website is simple and slick, therefore it may work.
Results
http://www.toasteddigital.com/ex/
In this example we have a city growing out of the ground, with smooth easing and timing, a couple of simple sprites going across the page and a button to move the content into the zone we want it. The jquery seems good enough. The stylesheet is a little off in IE7+ and I haven’t yet tested in IE6, but in FF, Chrome and Safari the results are great. I’ve also tested the example on safari on a borrowed iPad with good results, something I’d have no chance with using Flash. It’s all in basic form, but it seems great alternative to Flash when using simple animation. As we get to use more and more HTML5 as well, there are more complex features that can be included.


