ScrollMagic Home | offizielle Dokumentation
Siehe in der Dokumentation, welche Dateien eingebunden werden müssen. Kurz zusammengefasst ist es JQuery, TweenMax, und ScrollMagic.
Man erzeugt einen Controller
var controller;
$(document).ready(function($) {
controller = new ScrollMagic();
});
Man erzeugt eine oder mehrere Greensock Animationen. Man kann aber auch darauf verzichten, wenn man nur die Pin Funktion einsetzen möchte.
var tween = TweenMax.to("#animate1", 0.5, {backgroundColor: "green", scale: 2.5});
Dann erzeugt man eine oder mehrere Szenen und weist diese dem Controller zu. Beachten Sie, dass hier ein anderer Selektor genutzt wird, als im Tweening. Im Tweening wird ein Element angesprochen, welches animiert werden soll. In der scene Funktion wird ein Selektor genutzt dessen Scrollposition abgefragt wird. Sobald das Element den Triggerpunkt erreicht, wird das Tweening ausgeführt. Der Triggerpunkt ist ein Punkt irgendwo im sichtbaren Bereich. Man kann seine Position bestimmen.
var scene = new ScrollScene({triggerElement: "#trigger1"})
.setTween(tween)
.addTo(controller);
Es gibt verschiedene Möglichkeiten Szenen einem controller zuzuweisensiehe Dokumentation
controller.addScene(scene1, scene2);
Wenn man die pin Funktion nutzen möchte, muss man diese mit setPin('selektor') zuweisen.
new ScrollScene({triggerElement: "#trigger", duration: 150})
.setPin("#pin")
.addTo(controller);
Wenn das Element dessen Selektor beim Erzeugen der scene übergeben wird, den Triggerpunkt berührt, werden die Tweening oder Pinning Funktionen ausgeführt. Die vertikale Triggerposition liegt irgendwo zwischen der oberen und unteren Kante des sichtbaren Bereichs des Browserfenster. Die Position kann als Option der scene Funktion übergeben werden.
var scene = new ScrollScene({triggerElement: "#trigger1", triggerHook: 0})
Option der scene
| numerisch | Schlüsselwort | |
| oben | 0 | "onLeave" |
| mitte | 0.5 | "onCenter" |
| unten | 1 | "onEnter" |
Außerdem kann man triggerHook über eine Methode abfragen und zuweisen. siehe offizielle Dokumentation
//abfragen var triggerHook = scene.triggerHook(); //setzen scene.triggerHook(0.7);
Die scene Option reverse erwartet einen boolschen Wert. Der Standard ist true. Das bedeutet, dass die Aktionen auch ausgeführt werden, wenn man zurückscrollt. Ein gepinntes Element erhält so beim zurückscrollen wieder die gleiche Position, die es vor dem nach oben scrollen gehabt hatte.
Bei der Option false, wird beim zurückscrollen das Objekt nicht gepinnt oder das Tween ausgeführt.
Beispiele reverse:true | reverse:false
Problem:
Ein Element soll beim Scrollen von unten im sichtbaren Bereich erscheinen und nach oben scrollen. Wenn es an der Oberkante angekommen ist, wird es festgepinnt.
Problem:
Ein Element ist an der Unterkante festgepinnt. Beim scrollen löst es sich irgendwann, wandert nach oben und wird an der Oberkante festgepinnt.
Das gleiche mit Scrollanimation