编程新手求助：如何实现Figma中滚动文字变形覆盖动画？

你当前的代码仅实现了黑色遮罩层的滚动展开，但没有结合文字变形逻辑。要还原Figma里的效果，核心是通过双层文字+滚动进度驱动的样式变换来实现，下面是完整的实现方案：

实现思路 #

• 底层放置正常显示的文字，顶层放置带黑色背景的文字容器
• 随着页面滚动，逐步增大顶层容器的高度（实现覆盖效果），同时对顶层文字应用缩放、旋转等变形（实现文字动画）
• 用滚动进度同步控制遮罩高度和文字变形参数，保证动画联动

完整代码实现 #

HTML #

<!-- 文字容器，固定在视口中心 -->
<div class="text-container">
  <!-- 底层正常文字 -->
  <h1 class="base-text">HELLO WORLD</h1>
  <!-- 顶层带黑色背景的文字容器，初始高度为0 -->
  <div class="mask-wrapper">
    <h1 class="mask-text">HELLO WORLD</h1>
  </div>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 200vh; /* 让页面可滚动 */
  background-color: #ffffff;
}

.text-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Arial', sans-serif;
  font-size: 6rem;
  font-weight: bold;
  /* 隐藏容器外的内容，避免顶层文字溢出 */
  overflow: hidden;
}

.base-text {
  color: #000000;
}

.mask-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #000000;
  overflow: hidden;
}

.mask-text {
  color: #ffffff;
  /* 设置变形原点为底部中心，让缩放从下往上展开 */
  transform-origin: bottom center;
}

JavaScript #

const maskWrapper = document.querySelector('.mask-wrapper');
const maskText = document.querySelector('.mask-text');

window.addEventListener('scroll', handleScroll);

function handleScroll() {
  // 获取当前滚动距离
  const scrollTop = document.documentElement.scrollTop;
  // 获取页面总可滚动高度
  const totalScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  // 计算滚动进度（0~1）
  const scrollProgress = scrollTop / totalScrollHeight;

  // 控制遮罩层高度：从0%到100%
  maskWrapper.style.height = `${scrollProgress * 100}%`;
  // 控制文字变形：随着滚动逐步放大（可根据需求调整缩放比例）
  maskText.style.transform = `scale(${1 + scrollProgress * 0.5})`;
}

自定义调整建议 #

• 如果需要其他变形效果（比如倾斜、位移），修改maskText.style.transform即可，例如：

  maskText.style.transform = `scale(${1 + scrollProgress * 0.5}) rotate(${scrollProgress * 8}deg)`;
  

• 追求更好的滚动性能，可以给滚动事件添加防抖：

  let debounceTimer;
  function handleScroll() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      // 原滚动逻辑代码
    }, 10);
  }
  

• 若不需要JS，可尝试CSS滚动驱动动画（兼容性稍差），直接用animation-timeline绑定滚动进度：

  .mask-wrapper {
    height: 0;
    animation: expand-mask linear;
    animation-timeline: scroll(root);
  }
  
  .mask-text {
    transform-origin: bottom center;
    animation: transform-text linear;
    animation-timeline: scroll(root);
  }
  
  @keyframes expand-mask {
    to { height: 100%; }
  }
  
  @keyframes transform-text {
    to { transform: scale(1.5); }
  }
  

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