0
ScrollMagic ile bir site yapıyorum ama video arka planımla ilgili bir sorun yaşamaya başladım. Bu, en son sahnenin kaydırılmaya başlayana kadar tetiklendiğini gösteriyor. İlk ankraj noktasında aşağı inerek tekrar yola çıkar.Arka plandaki video ScrollMagic ile en baştaki sahne tarafından tetikleniyor
Bu sorunu nasıl çözebilirim?
Fiddle: 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);