Kompatibilität:

WebSite X5 Evo und Pro

Animationen sind ein effektives Mittel, um eine Website moderner, ansprechender und klarer in der Kommunikation zu gestalten. Richtig eingesetzt, helfen sie dabei, die Aufmerksamkeit der Nutzer zu gewinnen, die User Experience zu verbessern und bestimmte Seitenbereiche hervorzuheben.


Um die Möglichkeiten zur Personalisierung weiter zu erweitern, stellt WebSite X5 ein Optionales Objekt zur Verfügung, das der Integration von Animationen dient, die mit LottieFiles erstellt wurden – einer Online-Plattform, die eine umfangreiche Sammlung leichter und für das Web optimierter Animationen bietet.


Dank dieses Optionalen Objekts können Sie Lottie-Animationen ganz einfach in die Seiten Ihrer Projekte einfügen, auch wenn Sie keine Programmier- oder Animationskenntnisse besitzen. 


In dieser Anleitung sehen wir:


Was Lottie-Animationen sind und wofür sie verwendet werden

Lottie-Dateien sind Vektoranimationen, die im JSON-Format gespeichert werden. Dabei handelt es sich um ein leichtes und strukturiertes Textformat, das Formen, Farben, Bewegungen und Zeitabläufe der Animation mathematisch beschreibt.

Im Gegensatz zu Bildern oder Videos enthält eine Lottie-Datei keine Pixel, sondern Anweisungen, die vom Browser in Echtzeit interpretiert und wiedergegeben werden.


Dieser Ansatz bietet konkrete Vorteile gegenüber herkömmlichen Formaten wie GIFs oder Videos:

  • Lottie-Dateien sind deutlich leichter als animierte GIFs;
  • die Qualität bleibt stets hoch, da es sich um Vektoranimationen handelt;
  • es treten keine Unschärfen oder Qualitätsverluste auf hochauflösenden Bildschirmen auf;
  • die Animationen werden auch auf mobilen Geräten flüssig wiedergegeben.


Zum Vergleich:

  • Ein GIF ist eine Abfolge von Rasterbildern, die schnell an Dateigröße zunimmt und beim Skalieren an Qualität verliert.
  • Ein Video benötigt mehr Ressourcen, längere Ladezeiten und bietet weniger grafische Flexibilität.
  • Eine Lottie-Datei (JSON) ist leicht, skalierbar und für das moderne Web optimiert.


#tip - Das Lottie-Format wurde ursprünglich von Airbnb entwickelt, um komplexe Animationen innerhalb von Web- und Mobile-Anwendungen effizient zu verwalten. Später wurde das Format als Open Source veröffentlicht, was seine weite Verbreitung auch im Web begünstigt hat.


Lottie-Animationen eignen sich daher besonders für:

  • die visuelle Aufwertung von Seiten, ohne die Ladezeiten zu beeinträchtigen;
  • das Hervorheben bestimmter Elemente, wie Schaltflächen oder Call-to-Action-Elemente;
  • die Bereitstellung von visuellem Feedback für Nutzer, beispielsweise beim Laden von Inhalten oder bei der Bestätigung einer Aktion.


Dank dieser Eigenschaften stellen Lottie-Dateien eine technische und effektive Lösung dar, um Websites moderner und dynamischer zu gestalten und gleichzeitig hohe Leistung sowie ein optimales Nutzungserlebnis zu gewährleisten.


Die Plattform LottieFiles

Sobald Sie verstanden haben, was Lottie-Dateien sind, stellt sich ganz natürlich die Frage, wo Sie diese finden, wie Sie sie erstellen und wie Sie sie in Ihren Webprojekten einsetzen können.

LottieFiles ist eine der wichtigsten Plattformen für dieses Format und bietet eine Reihe von Werkzeugen, die darauf ausgelegt sind, all diese Anforderungen abzudecken.


Insbesondere können Sie über LottieFiles:

  • Fertige Lottie-Animationen finden, dank einer umfangreichen Online-Bibliothek mit Tausenden von kostenlosen Ressourcen, die nach Kategorien und Stilen organisiert sind und auch in professionellen Projekten verwendet werden können.
  • Auf Premium-Inhalte und -Ressourcen zugreifen, die über kostenpflichtige Pläne verfügbar sind und sich an Anwender richten, die regelmäßig mit Animationen arbeiten oder erweiterte Lösungen benötigen.
  • Animationen direkt im Browser anzeigen, testen und anpassen, dank eines Online-Editors, mit dem das Ergebnis vor der Verwendung überprüft werden kann.
  • Dateien im JSON-Format herunterladen, die sofort in Webprojekte integriert werden können.


Mit WebSite X5 können Sie sofort mit der Verwendung von Lottie-Animationen beginnen, indem Sie auf die kostenlose LottieFiles-Bibliothek zurückgreifen, die für die meisten Projekte vollkommen ausreichend ist.

Sollten Sie in Zukunft mehr benötigen, können Sie jederzeit die erweiterten Funktionen und kostenpflichtigen Dienste der Plattform in Betracht ziehen.


So integrieren Sie Lottie-Animationen in WebSite X5 

Um eine Lottie-Animation in einem WebSite X5-Projekt zu verwenden, müssen Sie zunächst die gewünschte Animation über die Plattform LottieFiles finden.


Wenn Sie LottieFiles aufrufen, können Sie:

  • eine Suche mit Schlüsselwörtern oder Kategorien durchführen;
  • die Vorschau der verfügbaren Animationen anzeigen;
  • die für Ihr Projekt am besten geeignete Animation auswählen;
  • die entsprechende Datei im JSON-Format herunterladen, die die eigentliche Lottie-Datei darstellt.


Sobald Sie die Lottie-Animation lokal auf Ihrem Computer gespeichert haben, ist das Einfügen in Ihr Projekt über das Lottie-Animation-Objekt sehr einfach: 

  • Fügen Sie das Lottie-Animation-Objekt in die Seite ein und doppelklicken Sie darauf, um das Fenster mit allen Optionen zu öffnen.
  • Importieren Sie die Lottie-Animation, die Sie verwenden möchten: Klicken Sie im Feld Animationsdatei auf die Schaltfläche , um die zuvor lokal heruntergeladene Datei auszuwählen. Durch Klicken auf die Schaltfläche können Sie einen Titel und einen Alternativtext eingeben, die sowohl für die Barrierefreiheit als auch für die SEO-Optimierung der Seite nützlich sind (siehe Barrierefreiheit von Bildern: die Bedeutung von Alternativtext).
  • Anschließend können Sie einige Eigenschaften wie die Größe und die Hintergrundfarbe der Animation festlegen. Wenn Sie möchten, können Sie die Lottie-Animation auch in eine Schaltfläche umwandeln, indem Sie einen Link hinzufügen: Klicken Sie auf die Schaltfläche  und wählen Sie im daraufhin geöffneten Fenster die Aktion aus, die dem Link zugeordnet werden soll.
  • Damit die Animation niemals stoppt, aktivieren Sie die Option In Schleife abspielen.
  • Passen Sie abschließend einige Parameter an, die das Verhalten der Animation betreffen. Im Einzelnen können Sie Folgendes einstellen:
    • Wiedergabemodus: um die Abspielrichtung festzulegen (vorwärts, rückwärts, mit Bounce usw.).
    • Geschwindigkeit: um die Abspielgeschwindigkeit festzulegen (schneller oder langsamer).
    • Starttyp: um die automatische Wiedergabe oder die Wiedergabe nur bei Mauszeigerkontakt zu aktivieren. 
  • Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche Ok , um zu bestätigen. 


Möchten Sie es am liebsten sofort auf den Seiten Ihrer Website verwenden? Installieren Sie jetzt das LottieFiles-Objekt


Sie haben nicht genügend Credits, um dieses Objekt zu kaufen? Alle Credit-Pakete anzeigen