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.

Cattish

Love Burger Number 8 - Eating veggies has never been so darn carnivorous. – Enclave

You're not going to find something as smooth and good-looking as the animation on the page you linked to without Flash, and especially if you rule out Canvas. You either need to lower your standards or give in and use Flash. – Gullah

Answer 1

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

Favourite

Thanks for your answer. The plugin seems quite primitive when compared to the Flash animated ones (I guess for good reason that Flash does animation much better than browsers). – Cattish

That's because the flash one is using 3D layers. While there's some very limited support in some browsers for this, you can't rely on it. Instead, you should only anticipate being able to shrink and stretch images in one direction, or masking layers by using overflow:hidden tricks. – Simoniac