| | Webdesign

Logoanimation mit Javascript und SVG

Logoanimation mit Javascript und SVG

Animationen im Webdesign

Animationen sind eine wundervolle Bereicherung im Webdesign. Sie kombinieren die optischen Pluspunkte und Interaktionen mit Mehrwerten für die Suchmaschinenoptimierung. So kannst Du mit modernen JavaScript Animationen Deine Nutzer länger auf Deiner Website binden. Für Google ist das ein starkes Rankingsignal. Auch für das Jahr 2020 ist die Animation deshalb als Stilmittel wieder voll im Webdesign-Trend. Ob als Flatanimation, Microanimation, Scrollanimation oder Textanimation. Im richtigen Umfang verwendet, bereichern Animationen jede Webseite, weil Sie die Aufmerksamkeit lenken, Wartezeiten überbrücken oder einfach interessant anzuschauen sind. Glücklicherweise bieten moderne Browser immer bessere Möglichkeiten für Animationen.

Demo Animation mit JavaScript und SVG

Damit das nicht zu theoretisch wird, haben wir eine kleine Animation mit JavaScript und SVG zur Veranschaulichung vorbeireitet und diese um eine Animation mit einzelnen Buchstaben erweitert.

Zur Live SVG Demo gelangt Ihr, wenn Ihr die GIF Vorschau hier unten anklickt.

Javascript und SVG Vorschau GIF

JavaScript und SVG sind für Animationen ausgezeichnete Technologien. Das coole an der Kombination ist, dass wir uns mit dem Einsatz dieser Technologien die Vorteile und Besonderheiten von SVG voll umfänglich zu nutze machen können. Beispielsweise hat die Vorschau auf dieser Seite als „animierte Pixelgrafik“ eine stolze Dateigröße von 390 KB, während das SVG auf der Demoseite weniger als 10KB wiegt. Und das obwohl die SVG Animation weit runder läuft und auch noch eine viel bessere Auflösung hat.

Vorteile SVG im Schnellüberblick

  • kleine Dateigrößen, Performancevorteile
  • Flexibilität (Veränderbarkeit mittels CSS und JS)
  • Skalierbarkeit ohne Qualitätsverlust
  • Browserkompatibilität.

Hierbei sticht für Animationen neben der Skalierbarkeit vor allem die Flexibilität heraus. Wie auch das HTML werden Scalierbare Vektor Grafiken (SVG) als Bestandteil des Document Object Model (DOM) dargestellt. Daher können sie auf Websites gerade als Inline SVGs hervorragend via JavaScript manipuliert werden. Hierbei erweisen sich moderne JavaScript Bibliotheken mit unterschiedlichen Schwerpunkten aus Sicht der Webdesigner als sehr nutzlich.

Nützliche JavaScript Bibliotheken für SVG-Animationen

Perfekte Animationen sind immer noch aufwändig, durch die oben genannten Bibliotheken sind Sie aber heutzutage auch unter wirtschaftlichen Erwägungen machbar und sinnvoll. Letztlich zahlt sich der Aufwand aber aus. Animationen halten Besucher auf der Webseite. Dieses beeinflusst auch die Metriken der Suchmaschinen. Die längere Verweildauer führt zu positiven Signalen und einem besseren Ranking.

Wenn Du eine Idee für eine Webanimation hast, dir der Stil gefällt und Du professionelle Hilfe bei der Umsetzung oder der Konzeption benötigst, nimm gerne Kontakt mit uns auf.