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

问题描述

我正在尝试复制此过渡（绿色、弯曲、全屏滚动）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 }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）