Question

我在网站上使用ScrollMagic。它是一个包含7个“部分”的单页网站。第一个动画很好我正在为多个场景制作动画。当用户滚动时，我需要为每个部分设置动画。第一个可以，但是添加场景后的第二个只是空白。

（部分） HTML ：

<section id="slide1" ........>
    <div style="text-align: center;">
      <img id="racket" src="svg/racket.svg">
    </div>
    <div style="text-align: center;">
      <img id="racket2" src="svg/racket2.svg">
    </div>
    <div style="text-align: center;">
      <img id="racket3" src="svg/racket3.svg">
    </div>
</section>

<section id="slide2" .....>
    <div style="text-align: center;">
      <img id="earth" src="svg/earth.svg">
    </div>
</section>

JavaScript

$(function() {

var controller = new ScrollMagic.Controller();

var slide1_moves = new TimelineMax()
    .to("#racket", 10, {x:500, y:-300, opacity: 0}, 0.2)
    .to("#racket2", 10, {x:-500, y:-400, opacity: 0}, 2)
    .to("#racket3", 10, {x:-200, y: -300, opacity:0}, 0.5)


var scene1 = new ScrollMagic.Scene({
        duration: 3000,    
        offset: 0        
    })
    scene1.setTween(slide1_moves)
    scene1.setPin("#slide1") 
    scene1.addTo(controller)  

var slide2_moves= new TimelineMax()
    .to("#earth", 10, {x:500, y:-300, opacity: 0}, 0.2)

// create a scene with custom options and assign a handler to it.
var scene2 = new ScrollMagic.Scene({
        duration: 5000,
        offset: 0
});
scene2.setTween(pohyby_slide2)
scene2.setPin("#slide2") 
scene2.addTo(controller)

});

Answer 1

我不确定100％，但是我确实在我的页面上使用了不同的语法（正在运行）。

您的代码是：

var scene2 = new ScrollMagic.Scene({
        duration: 5000,
        offset: 0
});
scene2.setTween(pohyby_slide2)
scene2.setPin("#slide2") 
scene2.addTo(controller)

});

我会用不同的方式写（注意“ scene2”的多重省略以及分号和括号的不同处理：

var scene2 = new ScrollMagic.Scene({
        duration: 5000,
        offset: 0
})
.setTween(pohyby_slide2)
.setPin("#slide2") 
.addTo(controller);

ScrollMagic中的后续场景无法正常工作

1 个答案: