我想知道如果以下代码适合以所需方式使用ScrollMagic。我试图通过使用这种方法来固定元素,但它不起作用。
使用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>
为了使其正常工作,需要进行哪些更改?
答案 0 :(得分:1)
您需要在id
方法中传递要引脚的setPin()
元素。
对于你的情况,这应该有效。
var scene = new ScrollMagic.Scene({
triggerElement:(this)
})
.setPin('#pin')
.setTween(tween)
.addTo(controller);
});