JQuery bounce effect

Question

Hi, I want to make a modal div on the page, using the bounce effect, for example, on the iPhone for its pop-up messages.

By refusal, I mean that the scale is larger than usual, and then becomes the actual size in elastic form, until it disappears.

Any ideas on where to start with this?

Answer 1

I would start with a smooth transition . The demo on the homepage seems pretty close to what you need.

Answer 2

I'll start with a game with various effects in the plugin: http://gsgd.co.uk/sandbox/jquery/easing/

Answer 3

Since you cannot scale HTML elements properly (this looks weird), I recommend a simpler approach. Just set overflow: hiddenand resize the element accordingly. It will not look as good as the native dialogs, but it is approaching. You can use jQuery easing plugin to animate bounce.

Answer 4

The solution was to use CSS3 animation techniques such as scale3d, and blend with transparency.