📌 Hinweis: Damit alles reibungslos funktioniert, müssen deine Lottie-Dateien immer im dot.lottie-Format (.lottie) sein – andere Formate werden von Onepage nicht unterstützt.
Kostenlose dot.lottie-Dateien findest du auch auf lottiefiles.com.
Schritt 1: Lottie Animation herunterladen
Lottie Animation herunterladen: Besuche eine Plattform wie lottiefiles.com und lade dir eine Animation im dot.lottie-Format herunter. Achte darauf, dass das Format stimmt, damit alles problemlos funktioniert.
Falls du eine Lottie Datei bereits hast, gehe zum Schritt 2.
Schritt 2: Lottie Animation in deine Webseite einfügen
Um eine Lottie-Datei einzubinden, füge einfach ein Bildelement in einen beliebigen Abschnitt deiner Seite ein. Wähle dann die gewünschte Lottie-Datei aus.
📌 Hinweis: Du hast auch die Möglichkeit, die Lottie-Datei direkt aus der Bibliothek auszuwählen, falls du sie dort hochgeladen hast. So wird die Animation schnell und einfach in deine Seite integriert. 😊
Schritt 3: Lottie Einstellungen aufrufen
Nachdem du die Lottie-Datei eingebunden hast, kannst du nun die Einstellungen der Animation anpassen. Klicke auf die eingebundene Lottie-Animation, um die Optionen anzuzeigen.
Schritt 4: Lottie Einstellungen anpassen
Hier kannst du Parameter wie die Wiedergabegeschwindigkeit, die Schleifenoptionen (ob die Animation wiederholt wird) und die Start- und Endzeit der Animation festlegen.
Du kannst auch einstellen, ob die Animation beim Scrollen oder beim Hovern ausgelöst wird, je nachdem, wie du die Animation auf deiner Seite präsentieren möchtest. Mit diesen Anpassungen kannst du die Lottie-Animation ganz nach deinen Wünschen gestalten!
Autoplay: Die Animation wird automatisch abgespielt, sobald die Seite geladen wird – ohne dass der Nutzer etwas tun muss.
Beim Klicken: Die Animation startet, wenn der Nutzer auf das Element klickt. Perfekt, wenn du eine Interaktion möchtest, bevor die Animation abläuft.
Beim Hover: Die Animation wird abgespielt, wenn der Nutzer mit der Maus über das Element fährt (hover). Ideal, um die Aufmerksamkeit des Nutzers auf bestimmte Bereiche zu lenken.
Sync mit Scroll: Die Animation wird synchron zum Scrollen der Seite abgespielt. Je weiter der Nutzer nach unten scrollt, desto mehr läuft die Animation ab – ideal, um die Animation in einem Verlauf darzustellen.
⚠️Wichtig: Bitte beachte, dass du die Effekte im Editor eventuell nicht immer sichtbar siehst. Sie werden jedoch in der Live-Version korrekt angezeigt.
🎉 Mit diesen Optionen kannst du die Animation genau so gestalten, wie es zu deinem Design passt!🎉
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂