如何实现angular.dev页面的Angular Logo滚动缩放动画效果？

要实现滚动时Angular Logo随滚动逐渐放大的效果，核心是监听页面滚动事件，根据滚动进度动态调整Logo的缩放比例，以下是完整的实现示例：

核心实现思路 #

• 监听scroll事件，计算当前滚动的相对进度（0为页面顶部，1为滚动到底部）
• 将滚动进度映射到Logo的缩放范围（比如从初始1倍放大到2倍）
• 用CSS过渡让缩放动画更平滑自然

HTML 结构 #

<!-- 固定定位的Angular Logo容器 -->
<div class="angular-logo">
  <svg viewBox="0 0 250 250" fill="#DD0031">
    <path d="M125 0L0 125h75v125h100V125h75L125 0z"/>
  </svg>
</div>

<!-- 足够长的内容区，确保页面可滚动 -->
<div class="content">
  <p>滚动页面查看Logo缩放效果...</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>重复足够多的内容以撑高页面...</p>
  <!-- 可自行添加更多段落或内容 -->
</div>

CSS 样式 #

.angular-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  /* 初始缩放比例 */
  transform: scale(1);
  /* 平滑过渡动画，避免生硬跳转 */
  transition: transform 0.1s ease-out;
  z-index: 999;
}

.content {
  height: 3000px; /* 设置足够高度让页面能滚动 */
  padding: 20px;
}

JavaScript 逻辑 #

const logo = document.querySelector('.angular-logo');
// 自定义缩放范围：最小1倍，最大2倍
const minScale = 1;
const maxScale = 2;

function handleScroll() {
  // 计算滚动的相对进度：0（顶部）到1（底部）
  const scrollProgress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  // 根据进度计算当前缩放值
  const currentScale = minScale + (maxScale - minScale) * scrollProgress;
  // 应用缩放变换
  logo.style.transform = `scale(${currentScale})`;
}

// 绑定滚动事件
window.addEventListener('scroll', handleScroll);
// 初始化时触发一次，确保初始状态正确
handleScroll();

优化建议 #

• 用requestAnimationFrame优化滚动事件，避免频繁重绘：

let ticking = false;
function handleScroll() {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      const scrollProgress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
      const currentScale = minScale + (maxScale - minScale) * scrollProgress;
      logo.style.transform = `scale(${currentScale})`;
      ticking = false;
    });
    ticking = true;
  }
}

• 可自定义缩放触发区间，比如仅在滚动前50%距离内放大，之后保持最大尺寸：

const scrollProgress = Math.min(window.scrollY / (document.body.scrollHeight - window.innerHeight), 0.5);

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