GSAP 的视差效果

Question

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

我想在我的 DOM 区域内用不同的设置对多个对象进行动画处理，这很有效。

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

JS:

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

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

        tl.to( elA, dur, {
            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)作为起点，因为每个元素的起点都不一样
每个 span 都有 display: inline-block;

Answer 1

您正在 .container 元素上两次应用 parallax 函数，这些元素也有 .container-d class.

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

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

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

  tl.to(elA, dur, {
    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>

GSAP 的视差效果

Parallax effect with GSAP

html

javascript

css

jquery

gsap