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