网站首页滚动Wiper叠加透明Logo区域的实现咨询

当然可以实现！核心思路就是把你的Logo作为wiper的遮罩层，让wiper的覆盖效果只在Logo的指定区域（根据透明通道来）显示，然后跟着滚动进度同步移动。结合你已经用linear-gradient做wiper的基础，给你两种可行的实现方案：

方案一：CSS滚动驱动动画（现代浏览器首选，无需JS） #

这种方式利用CSS的scroll-timeline特性，不用写JavaScript就能实现滚动同步，代码更简洁。

步骤&代码： #

首先是HTML结构，保持你的背景图和wiper层级：

<div class="hero-section">
  <div class="background-image"></div>
  <div class="logo-wiper"></div>
</div>

然后是CSS部分，关键是用mask属性把Logo绑定到wiper上，再通过滚动驱动动画同步位置：

.hero-section {
  position: relative;
  height: 100vh; /* 占满视口高度，可根据你的需求调整 */
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图路径') center/cover no-repeat;
}

.logo-wiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 基础wiper渐变：左边透明，右边是你要的覆盖色（这里用白色示例） */
  background: linear-gradient(to right, transparent 0%, #ffffff 0%) 0 / 200% 100%;
  /* 用Logo作为遮罩：alpha模式表示用Logo的透明通道控制显示 */
  mask-image: url('你的透明Logo路径');
  mask-size: contain; /* 自适应容器大小，可改成固定值比如80% */
  mask-position: left center; /* 初始位置在左侧 */
  mask-repeat: no-repeat;
  
  /* 滚动驱动动画：绑定到页面滚动，滚动范围从顶部到hero区域底部 */
  animation: wipe-progress linear;
  animation-timeline: scroll(root);
  animation-range: 0 100vh;
}

@keyframes wipe-progress {
  to {
    /* 滚动到底部时，Logo遮罩移到右侧 */
    mask-position: right center;
    /* 同步渐变的分割线到最右侧 */
    background-position: 100% 0;
  }
}

关键说明： #

• 确保你的Logo是透明背景的PNG/SVG，SVG效果更好（矢量无模糊，mask支持更完善）。
• 如果想要Logo的透明区域透出背景，非透明区域被wiper覆盖，保持mask-mode: alpha（默认就是这个值）；如果反过来，就改成mask-mode: alpha-inverted。

方案二：JavaScript滚动事件（兼容旧浏览器） #

如果需要兼容不支持scroll-timeline的旧浏览器，可以用JS监听滚动事件，手动计算进度来同步wiper和Logo遮罩的位置。

步骤&代码： #

HTML结构和方案一一样，CSS调整掉滚动动画部分：

.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图路径') center/cover no-repeat;
}

.logo-wiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, #ffffff 0%) 0 / 200% 100%;
  mask-image: url('你的透明Logo路径');
  mask-size: contain;
  mask-position: left center;
  mask-repeat: no-repeat;
}

然后添加JavaScript代码：

const hero = document.querySelector('.hero-section');
const wiper = document.querySelector('.logo-wiper');
const heroHeight = hero.offsetHeight;

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 计算滚动进度：0（顶部）到1（hero区域底部）
  const scrollProgress = Math.min(1, Math.max(0, window.scrollY / heroHeight));
  
  // 同步Logo遮罩和渐变背景的位置
  wiper.style.maskPosition = `${scrollProgress * 100}% center`;
  wiper.style.backgroundPosition = `${scrollProgress * 100}% 0`;
});

额外小提示： #

• 可以调整mask-size来控制Logo在wiper上的显示大小，比如mask-size: 60% auto让Logo占容器宽度的60%。
• 如果你的wiper是从右向左移动，只需要把动画里的left和right调换，或者JS里用100% - scrollProgress * 100%来计算位置。

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