用ScrollMagic弄湿我的脚。我在页面上有很多元素:
<section id="section1">
<!-- .... -->
</section>
<section id="section2">
<!-- .... -->
</section>
<section id="section3">
<!-- .... -->
</section>
我想在每个滚动到视图时触发相同的动画。它适用于一个,但我必须复制此代码3次,似乎我错过了一些允许我在所有3中应用单个实例的东西。
// Init ScrollMagic Controller
var scrollMagicController = new ScrollMagic.Controller();
// Create Animation for 0.5s
var tween = TweenMax.to('#section2 DIV', 0.5, {
//backgroundColor: 'rgb(255, 39, 46)',
top: '-100px',
opacity: 1
});
// Create the Scene and trigger when visible
var scene = new ScrollMagic.Scene({
triggerElement: '#section2',
triggerHook: 1,
duration: 300,
//reverse: false,
})
.setTween(tween)
.addTo(scrollMagicController);
// Add debug indicators fixed on right side
scene.addIndicators();