Beim MouseOver über eine "Bühne" werden drei "Bälle" möglichst realistisch zum Hüpfen gebracht. Die Bälle bestehen aus Quadraten (divs) mit 50% border-radius und einem Farbverlauf. Die Bewegung wird über CSS-Keyframe-Animationen generiert, welchen durch Bezier-Timings einigermaßen realistisch wirken. Durch weitere Details (Schatten verändern sich und werden unscharf, Bälle verformen sich beim Auftupfen, etc.) wirkt das Ganze ziemlich gut, finde ich.
Das ganze Tutorial gibts auf http://bemeo.de/bouncing. Geeignete Anwendungsmöglichkeiten (außer dem reinen Spaß an der Freude) sind z.B. Preloader oder 404-Seiten.
Back to Top