带有GSAP的简陋视差文本

Question

我试着用视差做一个文本，但失败了。代码看起来无伤大雅，似乎没有做错任何事情，但滚动的外观和感觉却是完全错误的。

标记是这样的：

<!-- content above -->
<section class="section-parallax">
  <div class="container text-center">
    <div class="flex-row-columns">
      <div class="flex-row">
        <h2 class="heading flex-8">
          <span class="heading-sub">Some Header</span>
          <span class="heading-bottom">getting also long<sup>
        </h2>
      </div>
    </div>
  </div>
</section>
<!-- content below -->

像这样的样式：

.container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 1400px;
}

.text-center {
  text-align: center;
}

.section-parallax {
  background: black;
  overflow: hidden;

  &,
  & .container,
  & .flex-row {
    min-height: 545px;
  }

  & .container {
    transform: translate3d(0, -100%, 0);
  }
}

.flex-row-columns {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.flex-row {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: -15px;
  margin-right: -15px;
}

.flex-8 {
  flex-basis: 66.66666666666667%;
  padding-left: 15px;
  padding-right: 15px;
}

.heading {
  color: white;
  font-size: 54px;
  letter-spacing: .66px;
  line-height: 1.273em;
}

.heading-sub {
  display: block;
  margin-bottom: 20px;
}

最后，我使用的JS是这样的：

class ParallaxSection {
  constructor() {
    this.el = document.querySelector('.section-parallax');
    this.els = {
      container: this.el.querySelector('.container')
    };
    this.calcBounds();

    window.addEventListener('scroll', this.onScroll.bind(this));
    window.addEventListener('resize', () => {
      this.calcBounds();
      this.onScroll();
    });
  }

  calcBounds() {
    if (this.tween) {
      this.tween.kill();
      this.els.container.removeAttribute('style');
    }

    const rect = this.el.getBoundingClientRect();
    const scrollY = ParallaxSection.getScroll();

    this.start = (rect.top + scrollY) - (window.innerHeight * 0.75);
    this.end = this.start + this.el.offsetHeight + window.innerHeight;
    this.tween = TweenLite.fromTo(this.els.container, 1, {
      css: {
        force3D: true,
        y: -this.el.offsetHeight
      }
    }, {
      paused: true,
      css: {
        force3D: true,
        y: this.end - this.start - this.el.offsetHeight
      },
      ease: Linear.easeNone
    });
  }

  onScroll() {
    const scroll = ParallaxSection.getScroll();

    if (scroll >= this.start && scroll <= this.end) {
      const diff = this.end - this.start;
      const offset = scroll - this.start;
      const perc = offset / diff;
      this.tween.progress(perc);
    }
  }

  static getScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
}

const p = new ParallaxSection();

现在，奇怪的是，当我试图发现这个问题时，我把这个放进了钢笔中，这样我就可以试着看看哪里出了问题，而在钢笔中似乎没有问题。这导致我删除了页面上的所有元素，并准确地复制了这支笔，事实证明，由于某些未知的原因，这种效果在codepen上是完美的，但却失败了。

我已经下载了codepen生成的整个HTML，它也经历了同样的经历。

​

​

Pen在这里是要被看到的。

它有什么问题？

Answer 1

我认为问题来自于试图在每个滚动像素上执行逻辑。也许你可以使用以下命令来解决这个问题：

• passive event listeners
• debouncing the event handler on scroll