如何实现滚动时文本随背景渐变变色并同步放大效果？

以下是合并后的完整代码，可同时实现滚动时文本颜色随固定渐变背景同步变化和文本随滚动操作放大两个需求：

完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><span>TEST</span></div>

CSS #

body {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  font-size: 100px;
  text-align: center;
  font-weight: 600;
  background: linear-gradient(to top, blue 20%, red 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
  transform-origin: center; /* 确保缩放以文本中心为原点 */
}

span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

JavaScript #

$(window).scroll(function() {
  // 根据滚动距离计算缩放比例，限制最大缩放倍数为20
  const scaleFactor = Math.min(20, 1 + 0.005 * $(this).scrollTop());
  $('div').css('transform', `scale(${scaleFactor})`);
});

核心逻辑说明 #

• 文本渐变变色：通过background-attachment: fixed将渐变背景固定在视口，滚动时文本位置相对于视口移动，从而显示渐变背景的不同区域，实现颜色同步变化；配合-webkit-background-clip: text和-webkit-text-fill-color: transparent让文本仅显示背景渐变的颜色。
• 文本滚动放大：监听窗口scroll事件，根据滚动距离动态计算缩放比例，通过transform: scale()修改文本大小，用Math.min限制最大缩放倍数，避免过度放大影响页面体验。
• 兼容性：两个效果的实现逻辑互不冲突，CSS固定背景和JS动态缩放可同时作用于目标元素，无需额外调整。

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