本文将指导你如何使用 SVG 遮罩（mask）技术，结合 JavaScript 监听页面滚动事件，实现一个当页面滚动时，SVG 遮罩区域逐渐展开并覆盖视口的动态效果。我们将详细讲解实现原理、代码实现以及关键步骤，助你轻松掌握该技术。
原理概述
实现该效果的核心在于以下几点：
-
SVG 遮罩 (Masking): 使用 SVG 的
元素定义一个遮罩区域。该遮罩区域内的图像部分将显示，区域外的部分将隐藏。 - 滚动事件监听: 使用 JavaScript 监听 window 对象的 scroll 事件，获取页面滚动距离。
- 动态调整遮罩: 根据滚动距离，动态调整 SVG 遮罩的尺寸或变换，从而实现展开效果。
- 图片嵌入SVG： 将背景图片嵌入SVG，并应用遮罩。
实现步骤
1. HTML 结构
首先，我们需要创建基本的 HTML 结构，包含一个容器（container）和一个 SVG 元素。SVG 元素内部定义了遮罩（mask）以及需要遮罩的图片。
代码解释：
- svg viewBox="0 0 3000 1500">: 定义 SVG 的视口，确保内容缩放适应不同屏幕尺寸。
: 用于定义可重复使用的 SVG 元素，例如遮罩。 : 定义一个 ID 为 "m1" 的遮罩。fill="white" 表示遮罩区域内的内容显示，黑色区域隐藏。 : 将遮罩内容移动到 SVG 的中心位置。 : 对遮罩形状进行微调，使其居中。 : 定义遮罩的形状，这里使用了两个字母 "XG" 的路径数据。 : 将图片嵌入 SVG，并应用 ID 为 "m1" 的遮罩。
2. CSS 样式
添加一些基本的 CSS 样式，确保容器占据整个视口，并设置页面的滚动高度。
body {
margin: 0;
height: 400vh; /* 确保页面可以滚动 */
}
.container {
margin-top: 100vh; /* 容器距离顶部 100vh */
}代码解释：
- height: 400vh;: 设置 body 的高度为视口高度的 4 倍，确保页面可以滚动。
- margin-top: 100vh;: 将容器向下移动 100vh，以便初始状态下 SVG 遮罩位于视口之外。
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', function() { ... });: 监听 window 对象的 scroll 事件。
- container.offsetTop: 获取容器距离文档顶部的距离。
- container.clientHeight: 获取容器的高度。
- window.scrollY: 获取页面垂直滚动距离。
- s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;: 计算一个滚动比例 s，该值根据容器的位置和滚动距离而变化。
- s = (s > 1) ? 0 : 1-s;: 将 s 的值限制在 0 到 1 之间，并进行反转，以便滚动时遮罩逐渐展开。
- maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 动态调整遮罩的transform属性，实现缩放效果。scale(${1 + s 90})表示遮罩的缩放比例，随着s` 的变化而变化。
完整代码示例
SVG Mask Scroll Expansion
注意事项
- 性能优化： 频繁的滚动事件监听可能会影响性能。可以使用节流（throttling）或防抖（debouncing）技术来优化滚动事件处理。
- 遮罩形状： 可以根据需要自定义遮罩的形状，例如圆形、矩形或其他复杂的 SVG 路径。
- 兼容性： 确保代码在不同的浏览器上都能正常运行。
- 参数调整： 根据实际效果调整 JavaScript 代码中的缩放比例和其他参数，以达到最佳的视觉效果。
总结
本教程详细介绍了如何使用 SVG 遮罩和 JavaScript 实现滚动展开效果。通过理解 SVG 遮罩的原理、监听滚动事件以及动态调整遮罩的变换，你可以创建出令人惊艳的动态视觉效果。希望本教程能帮助你掌握这项技术，并在你的项目中应用它。
