CSS versus Javascript

06.10.2016 09:00:00
Animationen im Web: Wann empfiehlt sich dafür CSS, wann Javascript? Wir nennen Unterschiede und geben Tipps.

Animierte Elemente im Webdesign lassen sich sowohl mit CSS als auch mit Javascript umsetzen. Nicht immer funktioniert jedoch jede Variante problemlos, zudem ist das Prinzip unterschiedlich: CSS-Animationen werden vom Browser gesteuert, Javascript-Animationen dagegen nicht. Welche Vor- und Nachteile bringt das?

Animiertes Webdesign

Beim Erstellen von Animationen gibt es zwei verschiedene Wege.
Quelle: Viktor Mildenberger / Pixelio.de
Technische Möglichkeiten wachsen und mit ihnen die Ansprüche an modernes Webdesign. Statische Webseiten werden häufiger von solchen mit Animationen abgelöst. Hier lässt sich Kreativität ausspielen. Auch der aktuelle Trend „Storytelling“ kann mit Hilfe von Animationen unterstützt werden. Websurfer mögen es, wenn sie Entscheidungen treffen und durch den Klick auf verschiedene Elemente Aktionen auslösen können. Bei der Umsetzung stehen zwei Varianten zur Verfügung: CSS und Javascript.

CSS-Animationen

Animationen die mit CSS realisiert werden, kommen ohne Plug-ins oder Javascript-Know-how aus. Sie lassen sich einfacher umsetzen und werden vom Browser gesteuert. Das bedeutet, dass Frequenzen automatisch geregelt werden können und die Animationen stabiler abrufen. Nutzt man CSS3 für das Animieren im Webdesign, muss man bei einigen Browsern dennoch vorsichtig sein. Probleme können beim Internet Explorer in den Versionen 8 und 9 sowie bei Opera Mini auftauchen. CSS-Animationen erfordern außerdem viel Code.

Die Pluspunkte von Javascript

Javascript bietet mehr Möglichkeiten, dynamische Effekte zu erstellen, als CSS das kann. Zudem verzeiht Javascript dem Benutzer eher Fehler, denn Effekte können zeitverzögert ablaufen. Das funktioniert über den Befehl „Timeout“. Des Weiteren kann man mit Javascript leichter Überprüfungen anstellen. CSS hat keine Möglichkeit zu zeigen, ob es überhaupt eingeschaltet ist.

Empfehlungen

Die Geschwindigkeit ist auch bei Javascript hoch.
Quelle: Tim Reckmann / Pixelio.de
CSS taugt gut für kleine, schnelle Animationen - ein Menü oder ähnliches. Möchte man dagegen weitere Effekte, zum Beispiel mit Stoppen, Pausieren oder Wiederholen umsetzen, sollte man eher zu Javascript greifen. Hier hat der Webdesigner mehr Möglichkeiten und eine bessere Kontrolle über die Animationen. Bei Performance-Tests hat Javascript bei neueren Endgeräten besser abgeschnitten. Das alte Vorurteil, dass Javascript - selbst richtig angewendet - zu langsam sei, ist mittlerweile überholt.

Übersicht Druckprodukte
  • zahlreiche Produkte im Digital- und Offsetdruck

  • umfangreiches Sortiment in der Werbetechnik

  • Rollenoffset Produkte für große Auflagen
  • 100% klimaneutral
Produkte finden
Wir helfen Ihnen weiter!
SIE BENÖTIGEN HILFE BEI DER DRUCKDATENERSTELLUNG?
Wir helfen Ihnen gerne bei der Erstellung Ihrer Druckvorlagen.
Auf unserer Serviceseite haben wir viele nützliche Hinweise dazu zusammengefasst.
SIE HABEN IHR WUNSCHPRODUKT NICHT GEFUNDEN?
Sollten Sie spezielle Anforderungen an ein Produkt haben, richten Sie bitte eine Anfrage an unser Service-Team. Gemeinsam finden wir die richtige Lösung für Sie!