Animating divs using jquery

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 – Check back soon for a more in depth tutorial. Follow TD on Twitter or Facebook for updates!

BACK

15 Responses to Animating divs using jquery

  1. Gautch says:

    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!

  2. Sam says:

    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.

  3. Matt says:

    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.

  4. Aleks says:

    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 ;)

  5. 16i Team says:

    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

  6. Lawrence says:

    Awsome! I never knew jqeury could do something like this. You should be my mentor! :) Tutorials pls..

  7. bottleHeD says:

    I think the only major advantage flash has, is that it’ll play exactly the same across all browsers.

  8. Chris says:

    Any further news on this in depth tutorial ?!

  9. Rory says:

    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.

  10. Came for the tutorial too but I understand how crazy it can get. Hope life is good with you!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">