Vorschau

Experimente Cinematic GIF

HTML

copy

CSS

copy

Notizen

Dank CSS3 lassen sich einem Element sehr einfach mehrere Hintergrundbilder zuweisen. In diesem Fall nutze ich die Eigenschaft, um ein animiertes GIF über einem JPG zu platzieren. Durch die Trennung von Animation und Umfeld wird das Dateigewicht deutlich reduziert. Gleichzeitig wirkt die Qualität dennoch deutlich besser, als wenn man nur ein einzelnes GIF abspeichern würde.

Für ältere Browser muss man allerdings etwas nachhelfen. Für den Internet Explorer würde sich z. B. CSS3 Pie anbieten.

Weitere Infos zum Erstellen der sog. “Cinematic GIFs” gibt es z. B. hier.

Weitere Beispiele findest du z. B. hierhier oder auch bei ffffound.