One 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/
Update – September 2012
It’s been a few years since originally writing this article and launching the current Toasted Digital website, and there is still a fair bit of traffic heading its way, so I thought I’d make a quick update.
These days I’m leaning more towards using other methods of animation, including CSS, SVG and Canvas. Technologies more suited to animating. That said, despite the fun death of IE6, compatibility with still mass-used browsers such as IE8 is an issue, so animating with divs still comes up. I’d still however encourage developers to take up the more relevant technologies rather than this method, and question whether complex animated aspects of their websites are important enough for the user experience to add the additional overhead to legacy browsers.
Oh very slick! I can see how it won’t replace everything flash does, but i can also see how this is much better option for other uses.
Ill pass this onto my dev buddies.
Thanks!
Yeah, I think the results are really good. Something to add is that I have found a real need to fine tune certain aspects of the animation (things such as alpha, or heavy graphic divs moving with easing) depending on the user browser… this is mostly the case for IE7 and below though, IE9 Beta appears to run it nice and smoothly. I’ll post a quick tutorial on how to check browser etc soon.
Flash is dead. Fact.
…Well, not a fact, but the only thing holding me back from using JQuery is the fact that I know Flash inside-out. Give me a couple of months to get truly productive with today’s JavaScript and maybe I can create a site half as great as yours.
Flash is dying for the web, that’s so true, i love flash and use it for anything i can, but it is so much quicker and pleasing to just open a light text editor and update something )
I suppose that with the possibilities of rotation and tweens we will soon see some form of time-lined jquery animation IDE soon. could call it Jash
just google “adobe edge html5″. this thing is gonna rock, hopefully some open source alternative comes up )
This is excellent, we use a similar concept for our scrolling banner on our homepage. Essentially they are 6 divs being scrolled through a visible area. http://www.16i.co.uk/home.htm
Gotta love JQuery – Flash is a goner. Using this method has got to be so much better for SEO
Awsome! I never knew jqeury could do something like this. You should be my mentor!
Tutorials pls..
I think the only major advantage flash has, is that it’ll play exactly the same across all browsers.
Any further news on this in depth tutorial ?!
Eep. It’s been pretty busy here for the past few months but it’s on my to-do. =)
Excellent !! Thankyou !
Sites looks amazing !! and great feature in Web Designer Mag
Thanks, Chris!
Well, flash or no flash the site looks great Sam and with great use of jquery animate I think your sites better for it. Lovely work dude.
Thanks Rory, appreciate the kind words!
Came for the tutorial too but I understand how crazy it can get. Hope life is good with you!!
builds dont play on jquery 1.6.1 and 1.7.1. but it works 1.4.1