我正在使用ScrollMagic建立一个网站，但我已经开始遇到我的视频背景问题，即最后一个场景被触发，直到我开始在第一个锚点向下滚动，让它再次回到正轨
我如何解决这个问题？
小提琴：https://jsfiddle.net/Lx4m4ehd/6/
HTML
<video autoplay loop id="bg_video">
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_5mb.mp4" type="video/mp4">
</video>
<section id="section1">Section 1</section>
<section id="section2">Section 3</section>
<section id="section2">Section 4</section>
CSS
body,
html {
height: 100%;
width: 100%;
font-size: 100%;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
margin: 0;
padding: 0;
}
section {
height: 100%;
width: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#section1 {}
#section2 {}
video#bg_video {
object-fit: initial;
position: fixed;
height: 900px;
width: 500px;
z-index: -1;
will-change: transform; // creates a new paint layer
}
JS
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: "onLeave",
duration: "100%"
}
});
var tween = new TimelineMax()
.add([
TweenMax.fromTo($('#bg_video'), 1, {
y: 0
}, {
y: 100
})
]);
new ScrollMagic.Scene({
triggerElement: "#section1"
})
.setTween(tween)
.addIndicators()
.addTo(controller);
var tween = new TimelineMax()
.add([
TweenMax.fromTo($('#bg_video'), 1, {
y: 100
}, {
y: 200
})
]);
new ScrollMagic.Scene({
triggerElement: "#section2"
})
.setTween(tween)
.addIndicators()
.addTo(controller);