animierte Rundreise

Bespiel - Animation in SVG mein Zug mein Zug mein Zug

Bewertung: 5 / 5

Stern aktivStern aktivStern aktivStern aktivStern aktiv
 

Für die Homepage eines Anbieters für Stadtrundfahrten wurde eine animierte Rundfahrt für die einzelnen Strecken gewünscht. Zusätzlich sollten an den Haltestellen Passagiere ein und aussteigen.

Für die Umsetzung wurde zwingend vorgeschrieben, dass kein Flash verwendet werden soll und dass die Anzeige auch auf Smartphones funktionieren muss.

Umsetzung in Joomla

Im konkreten Auftrag wurde die Umsetzung als Modul vorgesehen.

Umsetzung der Animation

Die Animation selbst wurde in SVG umgesetzt, alle modernen Browser unterstützen SVG, der Internet Explorer ab Version 9. Für Handys und Smartphones wurde ein eigener etwas abgespeckter SVG-Sandard entwickelt: Tiny SVG.

Nur für den Internet Explorer sind Fallbacks notwendig, weil der Internet Explorer 9 zwar SVG unterstütz, aber nicht die Animation mit SMIL. D.h. für den Internet Explorer wird bis einschl. Version 8 ein Fallback für SVG und ab 9 ein Fallback für SMIL benötigt.

Für das Fallback wurde Raphael.js ausgewählt, weil diese JavScript-Bibliothek bei beiden "Probleme"  hilft.