Ist das die richtige Methode, um 'setPin' in ScrollMagic zu initialisieren?

Question

Ich möchte wissen, dass wenn der folgende Code für die Verwendung von ScrollMagic in der gewünschten Weise korrekt ist. Ich versuche, die Elemente mit dieser Methode zu fixieren, aber es funktioniert nicht.

Javascript:

var controller = new ScrollMagic.Controller(); 

$('.caption, .backcap').each(function(){ 

var tween= TweenMax.from($(this), 1, {autoAlpha:0,x:'+=30'}) 


var scene = new ScrollMagic.Scene({ 
    triggerElement:(this) 
}) 

.setPin() 
.setTween(tween) 
.addTo(controller); 
}); 

HTML:

<div id="slide-1" class="slide"> 
<div id="pin" class="caption"> 
<div id="backcap" class="backcap"><div class="intro_text"><h1 class="uppercase">blender</h1></div></div> 
<div id="backcap" class="backcap"><div class="intro_text"><p>3d art</p></div> 
</div></div></div> 

welche Änderungen notwendig sind, um damit es richtig funktioniert?

Answer 1

Sie müssen die id des Elements, das Sie in setPin() Methode stecken möchten, übergeben.

für Ihren Fall sollte dies funktionieren.

var scene = new ScrollMagic.Scene({ 
    triggerElement:(this) 
}) 

    .setPin('#pin') 
    .setTween(tween) 
    .addTo(controller); 
});