如何基于滚动位置触发CSS Keyframe圆形缩放动画？

以下是实现需求的完整代码，包含HTML、CSS和JavaScript：

HTML #

<div class="section">
  <h1>Section Title</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
  </p>
</div>

CSS #

.section {
  background: yellow;
  height: 100vh;
  /* 初始状态为圆形0%，完全隐藏 */
  clip-path: circle(0%);
  /* 添加平滑过渡，让缩放更自然 */
  transition: clip-path 0.1s ease-in-out;
}

JavaScript #

const section = document.querySelector('.section');
let currentRadius = 0; // 当前圆形半径百分比
let lastScrollTop = 0; // 上一次滚动位置
let scrollTimeout; // 滚动停止监听定时器

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 清除之前的滚动停止定时器
  clearTimeout(scrollTimeout);
  
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 计算滚动位移差值，判断滚动方向
  const scrollDelta = scrollTop - lastScrollTop;
  
  // 根据滚动方向调整圆形半径：向下滚放大，向上滚缩小
  if (scrollDelta > 0) {
    currentRadius = Math.min(currentRadius + 1, 75); // 最大限制为75%
  } else {
    currentRadius = Math.max(currentRadius - 1, 0); // 最小限制为0%
  }
  
  // 更新元素的clip-path属性
  section.style.clipPath = `circle(${currentRadius}%)`;
  
  // 记录当前滚动位置，用于下一次判断
  lastScrollTop = scrollTop;
  
  // 设置300ms超时，无滚动则视为停止，暂停动画
  scrollTimeout = setTimeout(() => {
    // 停止滚动时无需额外操作，保持当前半径即可
  }, 300);
});

关键逻辑说明 #

• 滚动方向判断：通过对比当前与上一次的滚动位置差值，确定用户是向上还是向下滚动，对应调整圆形半径的增减。
• 边界限制：将圆形半径范围锁定在0%到75%之间，避免超出动画预期范围。
• 滚动暂停处理：使用定时器监听滚动停止状态，300ms内无滚动操作则停止更新半径，保持当前圆形尺寸。
• 平滑过渡：CSS中添加transition属性，配合每次1%的半径调整幅度，实现多次滚动完成动画的效果。

内容的提问来源于stack exchange，提问作者GabiJ