Dynamic moving DIVs- how? HTML5, JQuery?

Question

I'd like to make moving DIVs on a web page- in other words, areas of content (with text, images and other arbitrary content) that move across the page when a button is clicked.

Each DIV needs to move across a certain number of pixels, then up a certain number of pixels.

There will be several DIVs that need to move independently of each other, and have defined z-order (i.e. "higher" DIVs will be able to move "over" "lower" DIVs, covering them up).

I've read about doing this in JQuery using the "animate" function, but this is apparently slow and can use a lot of processor as it drives frequent page re-rendering.

Does anyone know of any other ways to do such a thing, like HTML5 or any exciting new technologies? Maybe pure JavaScript? :)

Thanks for your advice!

Louise

Answer 1

In general, I've noticed that using css3 transitions/transforms are smoother than using jquery's .animate. This is not to say that .animate isn't perfectly fine for most situations.

You can build the whole thing with just CSS3 if you use keyframe animation like in http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

But most browsers don't support that. So I'd suggest a sort of compromise if you must go with css3 methods. You can technically do the following:

1) make three css classes with three different positions for your div(start, in between and end) using abs positioning and varying left & top values.

2) add transition: top 3s linear, left 3s linear; or whatever to the div to start with, in the first class with the rest of the properties for appearance.

3) use javascript to add the second class dynamically, making it transition to the second set of co-ords

4) use js to watch for when the co-ords are equal to the second state, and then add the third class, making it transition to the third position. Or simply use a timer to add the third class.

You'll have to make some changes to the css to make sure the last applied class overrides everything else. To make sure to get the specificity right, you can write the classes as base {}, base.second {} and .base.second.third {} or something like that(No pun intended there...)

Even then, only the newer versions of most browsers will support it, meaning a lot of your audience will not get it. Try jquery, you might be surprised.

Answer 2

Since the animation is happening on the client side then no matter what solution you decide on is going to be dependent on the processing capabilities of the client. I am not aware of any CSS and/or HTML5 features that do this (Andy mentions CSS3) but that would limit you to only modern browsers.

I think the most wide-ranging choice would be JavaScript. You can either roll your own or use jQuery (or some other JavaScript framework). The jQuery team works very hard on optimizing their code so I suspect that you will probably not gain much of an improvement by rolling your own.

Unless the browser is poorly written it should not result in the enture page being re-rendered. And while this does not help your clients with older browsers, newer browsers tend to us hardware-acceleration for rendering so the animation should have a much less impact on their systems.

Sorry I cannot give a definitive yes/no "this is what you should do" answer but I hope this provides some info to you.

Answer 3

Does it have to be tags? If you are heavily relying on animations you should take a closer look to canvas which is part of HTML5

Answer 4

was going to suggest .animate, but you say it's slow. I wonder where did you get that? It may have been so several major releases ago, specially for IE, but I haven't seen an issue in a long time. I suggest, try it yourself.

Answer 5

You could use css3 transitions. But they only work on modern browsers.
But moving a couple of divs with jquery should be no problem performance-wise.