本教程将引导你使用 SVG 遮罩技术，实现当页面滚动时，SVG 遮罩区域内的图像逐渐放大并填充视口的效果。我们将提供详细的代码示例和解释，帮助你理解和应用这种动态视觉效果。通过本教程，你将掌握如何利用 SVG 遮罩、JavaScript 和 CSS，创建引人入胜的滚动动画。
1. 准备工作
首先，我们需要准备一个包含图像和 SVG 遮罩的 HTML 结构。以下是一个基本的示例：
这段代码定义了一个 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 的滚动事件处理是实现这种效果的关键。 通过不断实践和尝试，你可以创造出更多令人惊艳的动态视觉效果。
