Scroll Magic - 同一动画的多个

时间:2016-07-01 16:40:52

标签: jquery scrollmagic

用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();

0 个答案:

没有答案