CSS Mask视差效果实现：滚动时蒙版快于图片移动

核心思路是通过动态修改CSS mask的位置属性来模拟视差——因为蒙版属于元素的一部分，没法独立设置滚动行为，只能借助JS监听滚动事件，计算滚动距离后调整蒙版的偏移量，让它的移动幅度大于图片。

步骤1：基础HTML与CSS设置 #

先给带蒙版的图片（或容器）设置基础样式，重点是把蒙版尺寸设得比元素本身大，预留足够的移动空间：

示例1：背景图+渐变蒙版

<div class="mask-parallax"></div>

.mask-parallax {
  width: 100%;
  height: 800px;
  /* 主背景图，随页面正常滚动 */
  background: url('你的图片路径') center/cover;
  /* 设置蒙版（这里用线性渐变举例，也可以用图片蒙版） */
  mask-image: linear-gradient(to bottom, #000, transparent);
  mask-size: 100% 200%; /* 蒙版高度设为元素的2倍，方便滚动偏移 */
  mask-position: center top; /* 初始位置 */
}

示例2：img标签+图片蒙版

<img src="你的图片路径" class="img-mask-parallax" alt="描述" />

.img-mask-parallax {
  width: 100%;
  height: auto;
  mask-image: url('你的蒙版图片路径');
  mask-size: 150% 150%; /* 蒙版尺寸放大，预留移动空间 */
  mask-position: center center;
}

步骤2：JS监听滚动并调整蒙版位置 #

通过监听滚动事件，计算滚动距离，给蒙版设置比滚动速度更快的偏移量（比如滚动距离的2倍），实现蒙版比图片移动更快的效果：

const targetElement = document.querySelector('.mask-parallax'); // 替换成你的元素类名
let ticking = false;

// 防抖+requestAnimationFrame优化性能
function updateMaskPos() {
  const scrollY = window.scrollY;
  // 蒙版偏移量设为滚动距离的2倍（倍数越大，蒙版移动越快）
  const maskOffset = scrollY * 2;
  // 调整蒙版的Y轴位置
  targetElement.style.maskPosition = `center ${-maskOffset}px`;
  ticking = false;
}

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateMaskPos);
    ticking = true;
  }
});

关键说明 #

• 蒙版移动速度由scrollY * X中的X值控制：X>1时，蒙版移动速度快于滚动速度（也就是快于正常滚动的图片）；X越大，速度差越明显。
• mask-size必须大于元素尺寸，否则蒙版移动时会出现空白区域，可根据需求调整百分比（比如150%、200%）。
• 用requestAnimationFrame和防抖标记ticking，避免滚动事件频繁触发导致性能问题。

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