GSAP 的视差效果

如何解决GSAP 的视差效果

我有一个问题要问你，希望你能帮助我。我正在使用 GSAP、-ScrollTrigger v3.5.1 为自己构建视差效果，并为自己构建了一个名为 parallax() 的函数。

我想在具有不同设置的区域内为我的 DOM 中的多个对象设置动画，这是可行的。

问题：如果在我的代码中多次调用该函数，动画不再流畅，尤其是当我处理负值和正值时。

JS：

parallax($('#fixed-hero-container .container'),$('#fixed-hero-container'),0.3,-50,true);
parallax($('#fixed-hero-container .container.container-d'),100,true);

function parallax(elA,elT,dur,val,scr,mark) {
        let tl = gsap.timeline();

        tl.to( elA,{
            scrollTrigger: {
                trigger: elT,scrub: scr,markers: mark,start: '50% 50%',end: '55% 5%'
            },y: val,ease: 'power4.out'
        });
    }

HTML：

<div id="fixed-hero-container">
                <div class="fname">
                    <span class="container">M</span>
                    <span class="container container-d">a</span>
                    <span class="container">s</span>
                    <span class="container container-d">s</span>
                    <span class="container">i</span>
                    <span class="container container-d">m</span>
                    <span class="container">o</span>
                </div>

                <div class="name">
                    <span class="container">C</span>
                    <span class="container container-d">i</span>
                    <span class="container">l</span>
                    <span class="container container-d">l</span>
                    <span class="container">u</span>
                    <span class="container container-d">f</span>
                    <span class="container">f</span>
                    <span class="container container-d">o</span>
                </div>

                <!--<div class="scrollIndicator"></div>-->
            </div>

通过 CSS 我给单个 .container = transform: translate(X,Y) 作为起点，因为每个元素的起点都不同。
每个跨度都有 display: inline-block;

解决方法

您对 parallax 元素应用了两次 .container 函数，这些元素也具有 .container-d 类。

也许您打算在第一个中使用 .container:not(.container-d)？

parallax($('#fixed-hero-container .container:not(.container-d)'),$('#fixed-hero-container'),0.3,-50,true);
parallax($('#fixed-hero-container .container.container-d'),100,true);

function parallax(elA,elT,dur,val,scr,mark) {
  let tl = gsap.timeline();

  tl.to(elA,{
    scrollTrigger: {
      trigger: elT,scrub: scr,markers: mark,start: '0',end: '55% 5%'
    },y: val,ease: 'power4.out'
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script><div id="fixed-hero-container"> <div class="fname"> <span class="container">M</span> <span class="container container-d">a</span> <span class="container">s</span> <span class="container container-d">s</span> <span class="container">i</span> <span class="container container-d">m</span> <span class="container">o</span> </div><div class="name"> <span class="container">C</span> <span class="container container-d">i</span> <span class="container">l</span> <span class="container container-d">l</span> <span class="container">u</span> <span class="container container-d">f</span> <span class="container">f</span> <span class="container container-d">o</span> </div></div><style>body,html{min-height:300vh;margin:0;padding:0}#fixed-hero-container{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:34px;text-align:center;height:100vh;padding-top:20vh;background:#222;color:#fff}.container{display:inline-block}</style>