Scrollmagic hinzufügen Ende Trigger

Question

I ScrollMagic zum ersten Mal bin mit und soweit ich das habe ich verstanden, wie meine Animation auslösen basierend auf Startelement und Dauer

nicht möglich ist, stattdessen ein Ende Trigger-Set Dauer?

var smcontroller = new ScrollMagic.Controller(); 
var smscene1 = new ScrollMagic.Scene({ 
    triggerElement: "#products-box-1", 
    offset: 200, duration: 1600 
}) 
.setTween(tweencan) 
.addIndicators() 
.addTo(smcontroller); 

Answer 1

Die beste Weise, die ich gefunden habe, ist die Anzahl der Pixel vom oberen Rand der Seite zu diesem Punkt in dem Dokument zu berechnen, indem die Höhen und Offsets der Elemente bekommen Sie ausrichten möchten, und Subtrahieren Sie die Pixel an der Spitze des zu scrollenden Elements und dessen Höhe.

Zum Beispiel, wenn Sie eine rechte Schiene haben eine <div class="rail"> enthält, die Sie neben einem <container class="content"> blättern wollen, und Sie wollen das Objekt auf den Boden des „Inhalt“ nach unten scrollen:

duration = ($("content").offset().top + $("content").height()) - ($("rail").offset().top + $("rail").height().top); 

Es scheint so Einfach, wenn du es siehst, aber ich habe eine gute Stunde lang versucht, herauszufinden, wie ich vorgehen soll, bevor ich gemerkt habe, dass es so einfach ist.

Answer 2

Sie können die Dauer auf die Länge eines bestimmten div einstellen.

Dauer: $ ("# divid") Höhe()

referenzierte aus. Scrollmagic duration