如何使用 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 (将#修改为@）

javascript scrollmagic