使用 SVG 遮罩实现滚动时图像放大效果教程-js教程-PHP中文网

使用 SVG 遮罩实现滚动时图像放大效果教程

DDD

发布： 2025-09-28 19:15:35

原创

896人浏览过

使用 svg 遮罩实现滚动时图像放大效果教程

本教程将引导你使用 SVG 遮罩技术，实现当页面滚动时，SVG 遮罩区域内的图像逐渐放大并填充视口的效果。我们将提供详细的代码示例和解释，帮助你理解和应用这种动态视觉效果。通过本教程，你将掌握如何利用 SVG 遮罩、JavaScript 和 CSS，创建引人入胜的滚动动画。

1. 准备工作

首先，我们需要准备一个包含图像和 SVG 遮罩的 HTML 结构。以下是一个基本的示例：

<div class="container">
  <svg viewBox="0 0 3000 1500" style="border: solid black thin;">
    <defs>
      <mask id="m1" fill="white">
        <g transform="translate(1500 750)">
          <g transform="translate(-80 -87)">
            <path d="M 82.2 109.5 L 46.3 166.1 H 0 L 57.2 82.9 L 1.6 0 H 49.2 L 82.7 54 L 117 0
              H 164.1 L 108 81.4 L 165.7 166.2 H 117.6 L 82.2 109.5 Z"/>
            <path d="M 325.1 158.7 c -19 10.3 -40.9 15.4 -65.9 15.4
              C 232.3 174.1 210.6 166.4 194.3 151.1 C 178 135.8 169.8 114.6 169.8 87.7
              c 0 -27.1 8.1 -48.5 24.2 -64.2 c 16.1 -15.7 37.9 -23.5 65.4 -23.5
              C 285.1 -0 305.9 4.8 321.9 14.4 l -13.3 35.4 c -15.9 -9.2 -31.9 -13.8 -47.8 -13.8
              c -14.9 0 -26.8 4.6 -35.6 13.8 c -8.9 9.2 -13.3 21.5 -13.3 37
              c 0 16.8 4.2 29.9 12.5 39.1 c 8.3 9.2 20.3 13.8 35.9 13.8
              c 9.7 0 18.6 -1.7 26.6 -5.1 v -24.5 H 245.9 v -33.5 h 79.2 V 158.7 z"/>
          </g>
        </g>
      </mask>
    </defs>
    <image width="100%"  mask="url(#m1)" href="https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg"/>
  </svg>
</div>

登录后复制

这段代码定义了一个 container 容器，其中包含一个 SVG 元素。SVG 内部定义了一个遮罩 m1，它由两个路径组成，形成字母 "XG" 的形状。 image 元素使用这个遮罩来显示部分图像。

2. CSS 样式

为了使滚动效果正常工作，我们需要一些基本的 CSS 样式：

body {
  margin: 0;
  height: 400vh; /* 确保页面可以滚动 */
}

.container {
    margin-top: 100vh; /* 容器距离顶部100vh，使得初始状态不在viewport */
}

登录后复制

这里我们将 body 的高度设置为 400vh，以便页面可以滚动。 container 设置 margin-top: 100vh;，这样初始状态下容器不会出现在viewport，保证初始状态是遮罩未放大的状态。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

3. JavaScript 滚动处理

现在，我们需要使用 JavaScript 来监听滚动事件，并根据滚动位置动态调整 SVG 遮罩的缩放。

window.addEventListener('scroll', function() {
  var container = document.querySelector('.container');
  let s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;
  s = (s > 1) ? 0 : 1-s;
  var maskgroup = document.querySelector('#m1 g');
  maskgroup.setAttribute('transform', `translate(1500 750) scale(${1 + s * 90})`);
});

登录后复制

这段代码做了以下几件事：

监听滚动事件： window.addEventListener('scroll', ...) 监听浏览器的滚动事件。
计算缩放比例： s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight; 计算一个基于滚动位置的缩放比例 s。这个比例基于容器的 offsetTop (容器顶部距离文档顶部的距离), 容器的高度，以及当前的 scrollY (垂直滚动距离)。
- (container.offsetTop + container.clientHeight*.5 - window.scrollY) 计算的是容器中心点距离视口顶部的距离。
- /container.clientHeight 将这个距离除以容器高度，得到一个相对比例。
- s = (s > 1) ? 0 : 1-s; 对 s 进行限制，使其在 0 和 1 之间。如果 s 大于 1，则设置为 0。然后，用 1 - s 得到最终的缩放比例。这样，当容器滚动到视口中心时，s 接近 1，遮罩放大到最大。
应用缩放： maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s * 90})`);获取遮罩内部的
元素（maskgroup），并设置其transform` 属性。
- translate(1500 750) 将遮罩移动到 SVG 的中心。
- scale(${1 + s * 90}) 根据计算出的缩放比例 s 动态缩放遮罩。 1 + s * 90 确保缩放比例从 1 开始，并且最大放大 90 倍。

4. 代码优化与注意事项

性能优化： 频繁的滚动事件处理可能会影响性能。可以考虑使用 requestAnimationFrame 来优化滚动处理，减少不必要的计算和渲染。
缩放比例调整： 缩放比例的计算和最大缩放倍数需要根据实际情况进行调整，以达到最佳的视觉效果。
SVG 坐标系： 理解 SVG 的 viewBox 属性和坐标系非常重要，这有助于你更好地控制遮罩的位置和大小。
兼容性： 确保代码在不同的浏览器和设备上都能正常工作。

5. 总结

通过本教程，你学习了如何使用 SVG 遮罩和 JavaScript 实现滚动时图像放大的效果。这种技术可以用于创建各种引人入胜的滚动动画，提升用户体验。记住，理解 SVG 的基本概念和 JavaScript 的滚动事件处理是实现这种效果的关键。通过不断实践和尝试，你可以创造出更多令人惊艳的动态视觉效果。

以上就是使用 SVG 遮罩实现滚动时图像放大效果教程的详细内容，更多请关注php中文网其它相关文章！