与 Angular onscroll 事件类似的视差

Question

我尝试使用 Angular 和 OnScroll 事件创建一种视差，但是在滚动时出现的文本闪烁。你知道如何让 onscroll 的效果渲染更流畅吗？也许只有 CSS ？

创建的脚本 https://stackblitz.com/edit/angular-b5cmf7?file=src%2Fapp%2Fapp.component.html

使效果成为可能的主要功能就是这个

  @HostListener('window:scroll', ['$event'])
  isScrolledIntoView(){
    const offsetHeight = this.testDiv.nativeElement.children[0].offsetHeight; 
    const rect = this.testDiv.nativeElement.getBoundingClientRect();
    if( rect.bottom <= window.innerHeight){ // when the div is visible in viewport change the height (not more than the height of the content)
      let height = (window.innerHeight - rect.bottom);
      if(height<offsetHeight){
        this.height = height;
      }else{
        this.height = offsetHeight
      }
    }
  }

Answer 1

一看到你的闪电战，我就意识到了一个我多次遇到的问题。这与您如何计算每帧的值有关。我不确定如何最好地用文字表达，但它是这样的：

Don't base your calculations on values that will be modified by the result.

这有点抽象，但特别是在您的情况下，问题在于rect.bot 和this.height 之间的关系。每次调用 onscroll 函数时，都会修改部分的高度。但是修改高度也会修改rect.bot的值，并且在下一次滚动事件时，你会得到不同的结果，所以高度是从不同的基数修改的，导致你观察到的振荡。

为避免这种情况，您希望所有计算仅基于不受结果影响的值。在这种情况下，我建议使用rect.top，它不关心部分的高度是多少。

此外，我建议您使用插值，因为它可以让您更好地控制。这个想法是你想选择这些值：

• 应在窗口高度的百分之几处开始显示（实际上，this.height = 0）
• 该部分应完全显示窗口高度的百分比（this.height = offsetHeight)
• 我应该如何在这两个值之间进行插值？ （最简单的是线性）

所以我已经分叉了你的闪电战，我已经继续从这里彻底窃取了 clamp 和 invlerp 函数：

https://www.trysmudford.com/blog/linear-interpolation-functions/

您可以在该链接中了解这些插值函数及其用途。

你会看到我已经创建了两个变量，称为“startPercentage”和“endPercentage”——它们与rect.top 的值相关，作为窗口内部高度的百分比。您可以使用这些来获得不同的速度或视差质量，从而获得您喜欢的效果。

这是叉子：

https://stackblitz.com/edit/angular-lcyc4q?file=src%2Fapp%2Fapp.component.ts

如果您愿意，请查看其他插值函数，以尝试不同效果的缓入和缓出。