Animationen mit skrollr
Webdesign mit Parallax-Effekt, animiertes One Page Webdesign, Überblendungen, Farbeffekte und mehr
Webdesign mit Parallax-Effekt, animiertes One Page Webdesign, Überblendungen, Farbeffekte und mehrEin beliebter Effekt im Webdesign ist der Parallax-Effekt. Beim Parallax-Effekt verschieben sich verschiedene Ebenen gegeneinander. Je weiter hinten die Ebene liegt, desto schneller bewegt sie sich (angelehnt an den in der Natur zu beobachtenden Parallax-Effekt).
Der Effekt ist an das Scrollen des Nutzers/Besuchers gekoppelt. In diesem Beitrag zeigen wir euch, wie man den Parallax-Effekt mithilfe der JavaScript-Bibliothek skrollr einfach im eigenen Webdesign umsetzen kann.
Im Netz sind viele Variationen des Effekts zu finden. Wenn ihr euch über den Parallax-Effekt und dessen Programmierung informiert, werdet ihr schnell auch auf die JavaScript-Bibliothek skrollr von Alexander Prinzhorn stoßen. Wer jetzt die Hände über dem Kopf zusammen schlägt und sagt „Ich kann aber kein JavaScript“ den können wir beruhigen.
Nötige Programmierkenntnisse: lediglich HTML5 und CSS3, oder noch einfacher gesagt: theoretisch nur die Grundlagen von HTML und CSS.
Zur Projekthomepage und Download:
https://github.com/Prinzhorn/skrollr
Mit skrollr lassen sich übrigens nicht nur Parallex-Effekte einfach erstellen. Die Library bietet jede Menge Möglichkeiten, eure Website aufzupeppen.
Hier ein paar Beispiele:
- https://www.kitkat.com/android/#/home
- http://www.microsoft.com/microsoft-band/en-us
- http://happy.is/
- http://www.theguardian.com/world/interactive/2012/nov/06/america-elect-graphic-novel
- http://www.fontwalk.de/03/
Noch mehr Beispiele für den Einsatz von skrollr findet ihr hier:
https://github.com/Prinzhorn/skrollr/wiki/In-the-wild
Habt ihr euch durch die Links geklickt und seid neugierig geworden?
Dann legen wir mal los.
skrollr-Grundlagen
skrollr kann auf jeder Seite eingebunden und genutzt werden. Hierfür muss nur die Bibliothek vor dem schließenden <body>-Tag eingebunden und aufgerufen werden:
Nun müssen wir die Elemente definieren, die Animiert werden sollen.
Diese legt ihr in einen div-Container, dem ihr die ID „skrollr-body“ zuweist. Die „spacer“ im folgenden Beispiel sind nur da, damit das animierte Element nicht aus dem Sichtfeld verschwindet, bevor es sich ändert. Zu beachten ist noch, dass der body-Bereich eine gewisse Mindesthöhe haben sollte, sonst kann nicht gescrollt werden.
DEMO = http://prinzhorn.github.io/skrollr/examples/docu/1.html
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
In diesem kurzen Beispiel ist alles enthalten was ihr braucht, um die wildesten Animationen zu erstellen. Das Beispiel von Prinzhorn benutzt nicht den Parallax-Effekt, liefert aber die Grundlagen.
Der div mit der ID „foo“ hat noch weitere Attribute außer der ID. Allesamt fangen mit data- an. Diese Attribute wurden mit HTML5 eingeführt und heißen „data-dash“-Attribute. Mit diesen Attributen steuert man im Fall von skrollr den Start- und Endpunkt der Animation, die sogenannten Keyframes.
Im Fall des Beispiels fängt die Animation bei 0 an die Hintergrundfarbe zu ändern. Bei 500 ist die Farbänderung abgeschlossen.
Die Farbänderung selbst wird durch die CSS-Angaben hinter dem jeweiligen „data-dash“-Attribut hervorgerufen.
Grundlagen skrollr zusammengefasst:
- Ihr braucht ein Element mit ausreichender Höhe und mit der ID „skrollr-body“.
- Ihr bindet vor dem schließenden HTML-body-Tag die JS-Datei ein und ruft die Funktion auf.
- Ihr legt die Elemente an, die animiert werden sollen.
- Zu Guter Letzt fügt Ihr an den Elementen die Angaben für die Animation hinzu.
Wenn die Höhe der Webseite den angegebenen Keyframes entspricht, sollte alles funktionieren.
Man könnte sich jetzt fragen: „Und wo bleibt der Parallax-Effekt?“
Jetzt wo die Grundlagen bekannt sind, kommt es nur noch darauf an, die richtigen Elemente anzulegen und die richtigen Attribute zuzuweisen.
Parallax-Effekt mit skrollr
Um den Parallax-Effekt zu bekommen, benötigt ihr mehrere Ebenen die übereinander liegen.
DEMO = http://prinzhorn.github.io/skrollr/examples/bg_constant_speed_more.html
Parallax background
Demo of background scrolling at constant speed independent of content height.
. . .
. . .
. . .
. . .
. . .
Et voilà 😉
Der Hintergrund bewegt sich in einer anderen Geschwindigkeit als der Vordergrund.
Die einzige Angabe ist die Position des Hintergrundes vom <body>-Tag. Der Hintergrund bewegt sich im Verhältnis zur Menge Text/Inhalt schneller als der Text/Inhalt.
Wenn ihr euch die Demos online angesehen oder auch selbst ein wenig damit rumgespielt habt, sind euch sicher auch die zusätzlichen Klassen aufgefallen. Skrollr weist den Elementen je nach Stand der Animation Klassen zu. Dadurch kann die Bibliothek unterscheiden, wo gerade eine Animation läuft und wie die Situation aussieht. Hierfür wird ein Style-Attribut zugeordnet.
Euch gefällt diese Kurzanleitung. Oder ihr habt selbst gute Beispiele, Ergänzungen etc.:
Dann ab damit in die Kommentare. Natürlich freuen wir uns auch sehr über euren like, retweet oder sonstiges „Weitersagen“.
[…] Gesteuert werden Aussehen und Verhalten der Website hierbei weitgehend über CSS, so dass für die Erstellung von Animationen und Effekten mit skrollr nicht unbedingt js-Kenntnisse erforderlich sind. Unter anderem lässt sich auch der bekannte […]