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

Question

Please take a look at the Cheese & Burger website.

More accurately, take a look at the slider down the bottom's relationship with the flip panels above.

I know I could skin jQuery UI Slider to do the slider relatively easy enough. I'm more concerned on how close you can get to the flip effect without resorting to Flash.

I don't want to use Canvas, as I do not know it and haven't the time to learn it (yet).

I can use any of the CSS3 stuff that is supported on the latest Gecko and WebKit, so long as it degrades somewhat gracefully for IE (perhaps they could simply just change for IE).

The panels ideally should be divs with any (reasonable) content. This kind of ruled out animating img element's height property for the effect.

It doesn't necessarily need to flip through en route panels if you don't do it sequentially (as the Flash does).

I thought perhaps I could animate the height of overflow: hidden divs with jQuery, and make a sprite of the bits which stick out during the animation (as there is no content in those pieces). I could step through the frames with setInterval().

I guess it wouldn't have the scaling effect as the page comes towards you and away, but I think I may be able to get away with it.

I'm going to use jQuery 1.4.

Before I jump into this, do you think it would be worth trying or is it simply not doable without Flash (as of now)?

If it is doable, do you have any suggestions? I'm not looking for the working code (though snippets would be nice), more along the lines of suggestions for things that I may have overlooked.

Answer 1

There are several pageturn plugins for jQuery, which can achieve a similar effect. here is one example. There are several others.