本教程将引导你使用 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，保证初始状态是遮罩未放大的状态。
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 的滚动事件处理是实现这种效果的关键。 通过不断实践和尝试，你可以创造出更多令人惊艳的动态视觉效果。
