css - 如何使弯曲的、扩大的圆圈、滚动过渡更加戏剧化以匹配此站点示例

Question

我正在尝试复制这种过渡（绿色，弯曲，全屏滚动）https://www.lower.com/save 我在这个小提琴中得到了它：https ://jsfiddle.net/egLhuvjt/ 但我有一个很难让圆圈从中心扩展而不必在左侧定义起始位置 - 一旦扩展，我也无法让溢出 x 隐藏圆圈。

$(window).scroll(function () {
  const scrollTop = $(window).scrollTop();
  const documentHeight = $(document).height();
  const windowHeight = $(window).height();

  const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 60;
  const $circle = $('.blue');

  growAnimation($circle, scrollPercent);
});

function growAnimation($element, animationPercentage) {
  const animationDecimal = easeInOutQuad(animationPercentage / 100);

    const finishSizePercent = 400;
  const finishPositionPercent = -145;
  const startPositionPercent = 50;
  const currentSizePercent = getProgressFromTo(0, finishSizePercent, animationDecimal);
  const currentPositionPercent = getProgressFromTo(startPositionPercent, finishPositionPercent, animationDecimal);


  $element.css({
    width: `${currentSizePercent}%`,
    height: `${currentSizePercent}%`,
    top: `${currentPositionPercent}%`,
    left: `${currentPositionPercent}%`
  });
}

function getProgressFromTo(from, to, animationDecimal) {
  return from + (to - from) * animationDecimal;
}

// Taken from https://gist.github.com/gre/1650294
function easeInOutQuad(t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }

标签： cssanimationgeometrybeziercurve