Simple Parallax Effect ✤✤✤✤

Leute, ihr könnt euch niccht vorstellen, was für ein Chaos es war, bis ich diesen Post hier fertig hatte.
Ich wollte mal wieder ein Video machen, hab alles schön gefilmt. Der Teil vor der Pause war okay und dann hat mein Programm entschieden, dass es meinen Laptop und den externen Monitor beide auf ein Verhältnis von 16:9 bringen will (obwohl ich gesagt habe nur Bildschirm 1). Wie auch immer, ich habe dann einfach einen Tag später noch einmal gefilmt, sodass ich euch jetzt trotzdem das Video präsentieren kann.
Worum geht es? Um Parallax.
Wahrscheinlich habt ihr schon die schönen Seiten gesehen, die parallaxes Scrolling einsetzen, bei denen Animationen ablaufen, sobald ihr runter scrollt. Parallax kann man super für Storytelling einsetzen, aber auch "subtile" Effekte peppen eine Seite auf.
Um so einen "subtilen" Effekt geht es heute.




Was wir dafür benutzen ist Skrollr. Ein super Plugin, basierend auf Vanilla JS, also kein jQuery von Nöten. Das Plugin kann extrem viel, es lohnt sich definitiv das auszuprobieren, ansonsten braucht ihr nichts ausser einem Bild und Editor. Ich benutze Brackets (absolut tollster Editor, wenn ihr HTML und CSS schreibt (und auch sonst ^^)), welches Live-Preview enthält. Sehr cool, um zu sehen, was man so macht, während man es macht.

Ansonsten ziemlich basic.
Skrollr wird mit data-Attributen beschrieben, man baut es im HTML ein und gibt zwei Punkte an. Anfang und End-punkt. Der ganze Rest wird vom Plugin erstellt. Keine keyframes von Nöten, der absolute Traum, wenn man Animationen mag aber vor der ganzen Schreibarbeit zurückscheut.

Ihr könnt euch das Demo, aber auch gerne den Code.

Ziemlich genau so, würde man das ganze auch in einem Blogger-Blog einbauen, wollt ihr ein Tutorial dazu haben, meldet euch :)

Gehosted wird das ganze auf GitHub, wie das geht seht ihr im Video auch noch.