如何解决如何使用 Scroll Magic 在图像顶部制作视差部分
我使用“滚动魔法”制作了视差部分 我想要的是背景图像(在第一个视差部分)从图像的顶部开始。 因为现在它从图像的中间开始
一开始我还以为把扳机放到底呢~ 但它使图像彼此不匹配.. (在中心您可以看到手机,该手机 img 与下一部手机 img 正确连接 所以它看起来像一部手机。)
在那之后我也接触了持续时间,但我尝试的所有事情都在制造不正确的 img maching 问题。
我该怎么办??非常感谢您的任何建议和帮助。
// init controller
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter",duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#scrollimg1",{y: "100%",ease: Linear.easeNone})
.addindicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#scrollimg2",ease: Linear.easeNone})
.addindicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#scrollimg3",ease: Linear.easeNone})
.addindicators()
.addTo(controller);
.parallaxParent {
height: 100vh;
overflow: hidden;}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
background-size: contain;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addindicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<div style="background-color:grey; width:100%; height:150px;"></div>
<div id="parallax1" class="parallaxParent">
<div id="scrollimg1" style="background-image: url('http://sappun.img13.kr/outsidemall/test/twstgw0615_1.jpg');"></div>
</div>
<div id="pingw04"></div>
<div id="parallax2" class="parallaxParent">
<div id="scrollimg2" style="background-image: url('http://sappun.img13.kr/outsidemall/test/twstgw0615_2.jpg');"></div>
</div>
<div id="parallax3" class="parallaxParent">
<div id="scrollimg3" style="background-image: url('http://sappun.img13.kr/outsidemall/test/twstgw0615_3.jpg');"></div>
</div>
<div style="background-color:grey; width:100%; height:150px;"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。