How close can we get to this Flash effect without using Flash?

Question

Please check out the Cheese and Burger website.

More precisely, look at the slider down in the lower relation with the flip up panels.

I know that I could throw off jQuery UI Slider to make the slider relatively easy. I'm more worried about how close you can get the flip effect without resorting to Flash.

I do not want to use Canvas, because I do not know this and do not have time to study it (yet).

I can use any CSS3 material that is supported in the latest versions of Gecko and WebKit, as long as it degrades somewhat gracefully for IE (maybe they just might just change for IE).

Panels should ideally be div with any (reasonable) content. This type excluded animation of the img element height property for the effect.

It is not necessary to flip through the route panels if you do not do it sequentially (as Flash does).

I thought that perhaps I could animate the height of the overflow: hidden div using jQuery and create a sprite from the bits that stick out during the animation (as there are no content in these fragments). I could go through the framework using setInterval() .

I assume that it will not have a zoom effect, since the page approaches you and away, but I think I can handle it.

I will use jQuery 1.4.

Before I get into this, do you think it's worth a try or is it just not feasible without Flash (for now)?

If feasible, do you have any suggestions? I'm not looking for working code (although the snippets would be nice), more along the lines of sentences for things that I might have forgotten.

Answer 1

For jQuery, there are several pageturn plugins that can achieve a similar effect. here is an example. There are several others.