如何在視口頂部之前應用滾動動畫+計算適當的百分比？

Question

我正在嘗試在滾動時逐步為路徑設置動畫。 我正在遵循此處和此處概述的技術。 我將動畫區域分成多個部分，並使用航點來激活每個部分。 一旦被激活（當段的頂部碰到視口的頂部時），段會監聽滾動事件，然后根據這個片段計算要動畫的線的百分比：

var scrollPercentage = rect.top / rect.height;

這似乎工作正常，codepen 在這里。 但是我需要這個動畫在片段到達視口頂部之前開始，比如距離頂部 100 像素。 此外，我需要一種方法來計算 rect.top 介於 0 和 100 之間時的百分比。出於某種原因，當我添加條件語句時，它要么是不點火或 b. 向后繪制路徑：

    if (rect.top > 0 && rect.top < 100) {
      //unsure what how to calulate and trigger before
      //top of viewport
      //var scrollPercentage = ?;
    } else if (rect.top < 0 && rect.bottom > 0) {
      var scrollPercentage = rect.top / rect.height;
    }

Answer 1

您只需要為rect頂部和底部值添加一個偏移量。 然后在比較中使用該值。

我稱之為prestart 。

var prestart = 100;
if ((rect.top - prestart) < 0 && (rect.bottom - prestart) > 0) {
  var scrollPercentage = (rect.top - prestart) / rect.height;
}