Scroll Animationen für jede Website – Vertikal und Horizontal

In diesem Video zeige ich dir, wie du mit nur ein bisschen CSS und JavaScript Scroll-Animation auf deiner Website integrieren kannst. Ganz egal ob WordPress, Statische Website oder was auch immer, du kannst es eigentlich auf jeder Website anwenden. In dem Video zeige ich dir jetzt, wie das auf einer WordPress-Seite mit dem Presaseam funktioniert. Ich arbeite eigentlich hauptsächlich mit dem Impreza Theme, nur fehlt bei dem Seam bzw. Eine, ja, ich sag mal mittlerweile schon grundlegende Funktion, und zwar halt Scroll-Animationen zu erstellen, Scroll-basierte Animationen zu erstellen. Und ich habe ziemlich häufig den Fall, dass sich das Kunden in meinen Projekten wünschen. Und deshalb habe ich mir ja einfach meine eigene Lösung gebaut, mit der man das ziemlich easy umsetzen kann. Wie gesagt, ich zeige dir jetzt, wie das im Empresas-Seam angewendet werden kann, aber den Code kannst du eigentlich auf jeder Website anwenden und dann mit einer CSS-Klasse das für jedes Element anwenden. Und wie das funktioniert, das zeige ich dir jetzt. Um dir das zu zeigen, habe ich jetzt mal schnell eine Beispielseite aufgesetzt. Und zwar mit folgender Ausgangssituation, dass wir hier im Hintergrund ein Bild haben. Da drüber liegt auch die linken Seite ein Schriftzug und hier unten rechts haben wir ein Logo. Und ich möchte das jetzt so haben, dass wenn ich nach unten scrollen, dass sich der Schriftzug nach rechts bewegt. Und wenn ich zurück nach oben scroll, dass sich das nach links bewegt. Und beim Logo möchte ich das so haben, dass wenn ich nach unten scrollen, dass sich der Schriftzug nach rechts bewegt. Und beim unten scroll, dass sich das Logo nach oben bewegt und wenn ich zurück nach oben scroll, dass sich das Logo nach unten bewegt. So, wie gesagt, im Impresaseme gibt es dafür standardmäßig leider keine Funktion, um solche scrollbasierten Animationen zu erstellen. Deswegen habe ich mir dafür einfach mal eine eigene Funktion gebaut. Den Code, den kannst du dir auch sehr gerne hier einfach aus meinem CodePen-Profil rauskopieren. Den Link dazu hinterlege ich gerne in der Videobeschreibung. Und ja, alles was du tun musst, ist es eigentlich nur zwei Teile von diesem Code zu kopieren. Und zwar fängst du an, indem du dir den gesamten JavaScript-Code kopierst. Das ist die Funktion für die Animation. Hier gibt es auch noch eine Sache, die du dann auch für dich individuell anpassen kannst, da komme ich gleich nochmal zu. Dann nehmen wir das jetzt einfach mal und gehen in die Seam Option von Impresa. Hier habe ich ja die Möglichkeit eben schnell JavaScript Code zu hinterlegen. Da gibt es natürlich auch noch viele andere Wege, wie man das machen kann. Ich mache das jetzt mal eben hier so auf diese schnelle Art und Weise. Und genau das gleiche machen wir jetzt auch mit dem CSS Code. Hier oben haben wir lediglich den Code für die Demo hier, um das zu visualisieren. Und hier fängt der Code an, den du kopieren musst, damit du das auf deiner Seite implementieren kannst. Den fügst du dann auch einfach in deine CSS-Datei ein und speicherst das Ganze. Und ja, wie du vielleicht schon erkannt hast, funktioniert das so, indem du dann deinen Elementen eine Klasse zuweist. dass ich mir das so gebaut habe, dass ich einmal eine Klasse dafür habe für die Scroll-Animation nach oben, einmal für die Scroll-Animation nach unten, einmal für links und einmal für rechts. So und dementsprechend musst du dann die Klasse einfügen, wie du das haben möchtest. Wie gesagt, wir wollen jetzt auf unserer Seite das so haben, dass sich das nach rechts bewegt, wenn ich nach unten scroll. Dementsprechend kopiere ich mir dann hier die Klasse HorizontalRight. und füge dann dem Element einfach diese Klasse zu. Im Presa Live Builder geht das so, indem ich einfach das Element anklicke und unter Gestaltung dann hier die Klasse einfüge. Und genau bei dem Logo wollen wir das ja so haben, dass sich das nach oben bewegt. Dementsprechend nehme ich dann die Klasse Vertical Up. und füge die. hier unter extra klasse ein und speichere das ganze einmal damit der effekt übernommen wird. ich glaube ich muss die seite einmal aktualisieren. so und jetzt sehen wir dass sich die elemente wie gewünscht animieren. So, wie gesagt, gehe ich jetzt noch mal kurz auf die Funktion, die du auch im Code anpassen kannst, um das vielleicht noch ein bisschen zu individualisieren. Im JavaScript Code gibt es, also hier habe ich einen Kommentar hintergelegt, a change value to adjust speed. Mit diesem Wert kannst du die Geschwindigkeit von der Animation anpassen. Da steht jetzt standardmäßig auf 0,2. Wenn wir den jetzt zum Beispiel auf 0,5 setzen, wirst du sehen, dass die Animation dann ja schneller ist und dementsprechend eine weitere Strecke ablegt. Ich glaube durch die Videoübertragung bzw. über die Videoaufnahme ist die Animation ein bisschen verzögert. Aber du siehst, dass die Animation jetzt weiterläuft. Und genau so kannst du das dann dementsprechend für jeden der einzelnen Animationen anpassen. Und in dem CSS-Snippet kannst du die Härte der Animation bestimmen. Also ich habe das hier hinterlegt, damit die Animation nicht so hart ist. Wenn wir jetzt hier den Wert nämlich erhöhen, wird die Animation der Bewegung an sich weicher. Wir machen das jetzt auch mal für Vertical Up. Wir setzen das jetzt einfach mal auf 0,6 und dann siehst du, dass die Animation an sich weicher wird. Ich hoffe in der Videoaufnahme wird das jetzt auch so angezeigt, aber auf jeden Fall ist es so, dass du den Effekt dadurch weicher oder härter einstellen kannst. Probier das am besten einfach mal selbst aus und dann wirst du es wahrscheinlich besser sehen als es jetzt in der Videoaufnahme angezeigt wird. Und ja, das ist es eigentlich auch schon. So kannst du dir ganz einfach mit diesem Code Snippet hier auf jeder Webseite, wie gesagt, ganz egal, ob es WordPress ist, ganz egal, welche Scene das ist, ob du eine statische Webseite hast, was auch immer. Diesen Code Snippets kannst du eigentlich überall einfügen und so dann auch schneller und weiße deine Elemente horizontal und vertikal animieren. Ich hoffe, ich kann dir damit weiterhelfen und ja, wünsche dir viel Spaß beim Ladenmachen. Kopie da einfach mal den Code Snippet aus und wenn du Fragen hast, kannst du dich auch gerne direkt bei mir melden.