Simples, leichtgewichtiges jQuery-Plugin zur Animation von SVG-Pfaden

jQuery DrawSVG
1 Kommentar

Die Nutzung von SVG bietet viele Vorteile – nicht nur was die Optimierung der Performance und damit auch der User Experience angeht. Vor allem lassen sich svg-Elemente auch animieren, womit sich einige Effekte erzeugen lassen, die auf der eigenen Website für einen Hingucker sorgen.

Zwar können SVGs auch direkt im CSS animiert werden, oft ist der Weg aber recht aufwändig und wird auch nicht in allen Browsern unterstützt. Mithilfe des jQuery-Plugins jQuery DrawSVG können dagegen leicht animierte Übergänge von SVG-Pfaden erstellt werden, die die eigene Website aufpeppen.

Nutzung von jQuery DrawSVG

Der besondere Vorteil von jQuery DrawSVG ist dessen Leichtgewichtigkeit und einfache Nutzung. So ist das Plugin „minified“ gerade einmal 2KB groß; gzipped sogar nur 800 Bytes. Zudem ist es leicht zu nutzen: das Plugin wird zunächst nach jQuery in das Markup der Seite eingefügt, anschließend kann das Plugin auf dem zu animierenden <svg>-Element initialisiert, in einer Variablen gespeichert und die fertige Animation ausgeführt werden. Allerdings lassen sich damit auch aufwändigere Nutzungsmöglichkeiten umsetzen.

jQuery DrawSVG bietet verschiedene Optionen für die individuelle Gestaltung der Animation an. So lässt sich etwa die Dauer der Animation festlegen; ebenso kann definiert werden, wie lange der Start der Animation der einzelnen Pfade verzögert werden soll. Darüber hinaus gibt es auch die Möglichkeit, eine Callback-Funktion einzufügen sowie festzulegen, in welche Richtung die Linie gezeichnet werden soll.

Auf der Projektwebsite finden sich verschiedene Demos, die das jQuery-Plugin in Aktion zeigen. Neben der einfachen Nutzung kann es etwa auch als Callback genutzt; zudem besteht die Möglichkeit, dass die Animation erst beim Scrollen der Seite ausgeführt wird. Mehr Informationen zur Nutzung des Plugins finden sich entweder auf der Projektwebsite oder auf GitHub.

Name jQuery DrawSVG
Hersteller Leonardo Santos
Projektwebsite http://lcdsantos.github.io/jquery-drawsvg
GitHub https://github.com/lcdsantos/jquery-drawsvg
webinale – the holistic web conference

Webperformance und Page Speed 2021

mit Sven Wolfermann (maddesigns)

UX Design: Kitsch – du willst es doch auch!

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

 

Software Architecture Camp

Advanced Web Pentesting

mit Christian Schneider (Schneider IT-Security)

What Star Wars Taught Me About Secure System Design

mit Anne Oikarinen (Nixu Corporation)

Aufmacherbild: Pencils And Shavings von Shutterstock / Urheberrecht: Mike Taylor

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
1 Kommentar
Inline Feedbacks
View all comments
trackback

[…] die Top 5 starten wir mit jQuery DrawSVG, das sich zur Animation von SVG-Pfaden bestens eignet, und mit Jets.js, einer nativen CSS Search […]

X
- Gib Deinen Standort ein -
- or -