本文详细介绍了如何使用SVG Mask技术，结合滚动事件，实现图片在滚动时逐渐展开并填充视口的动画效果。通过动态调整SVG Mask的缩放比例，创造出引人注目的视觉体验，并提供了完整的代码示例和关键步骤解析，帮助开发者轻松掌握该技巧。
核心原理
实现滚动展开效果的核心在于利用SVG的mask属性。mask属性允许我们将一个SVG图形作为遮罩应用到另一个元素（例如图片）上。通过动态改变遮罩的大小或位置，我们可以控制可见区域，从而产生动画效果。在本例中，我们将根据页面滚动的位置，动态调整SVG Mask的缩放比例，使遮罩区域逐渐扩大，最终完全显示图片。
步骤详解
-
HTML结构:
首先，我们需要一个包含SVG和图片的容器。SVG将用作遮罩，图片将是被遮罩的内容。
<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的视口大小。viewBox属性至关重要，它定义了SVG坐标系统的区域。
- <defs>: 用于定义可重用的SVG元素，例如我们的遮罩。
- <mask id="m1" fill="white">: 创建名为"m1"的遮罩。fill="white"表示遮罩的白色部分将显示下面的内容。
- <g transform="translate(1500 750)">: 将遮罩内容移动到SVG的中心。
- <g transform="translate(-80 -87)">: 微调遮罩内容的位置。
- <path d="...">: 定义遮罩的形状。这里使用了两个<path>元素来创建"XG"字母的形状。
- <image width="100%" mask="url(#m1)" href="...">: 将图片应用遮罩。mask="url(#m1)"引用我们定义的遮罩。
-
CSS样式:
为了使滚动效果正常工作，我们需要设置一些基本的CSS样式。
body { margin: 0; height: 400vh; /* 确保页面足够长，可以滚动 */ } .container { margin-top: 100vh; /* 将容器向下移动，以便开始时部分隐藏 */ }- height: 400vh;: 设置body的高度为视口高度的4倍，这样页面就有足够的滚动空间。
- margin-top: 100vh;: 将容器向下移动一个视口的高度，以便在页面加载时，SVG Mask初始状态是隐藏的。
-
JavaScript代码:
现在，我们需要编写JavaScript代码来监听滚动事件并动态调整SVG Mask的缩放比例。
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*.5 - window.scrollY: 计算容器中心点距离页面顶部的距离，减去当前滚动条的位置。
- /container.clientHeight: 将距离值归一化到0-1之间。
- s = (s > 1) ? 0 : 1-s;: 确保缩放比例在0-1之间。
- maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 动态设置遮罩的transform属性，改变其缩放比例。translate(1500 750)保持遮罩中心点不变，scale(${1 + s 90})根据滚动位置动态调整缩放比例。 这里的90` 是一个缩放因子，可以根据需要调整。
代码解释
- SVG结构: SVG定义了遮罩的形状和图片。viewBox属性确保SVG在不同尺寸的屏幕上正确缩放。
- CSS样式: CSS设置了页面的基本布局和滚动区域。height: 400vh确保页面有足够的滚动空间，margin-top: 100vh 将容器初始位置设置在屏幕下方。
- JavaScript逻辑: JavaScript监听滚动事件，并根据滚动位置计算缩放比例。然后，它使用setAttribute方法更新遮罩的transform属性，从而实现动画效果。
注意事项
- 性能优化: 频繁的DOM操作可能会影响性能。如果性能成为问题，可以考虑使用requestAnimationFrame来优化动画。
- 缩放因子: scale(${1 + s * 90})中的90是一个缩放因子，可以根据需要调整以控制动画的速度和范围。
- 兼容性: SVG Mask在现代浏览器中得到广泛支持。但是，为了确保在旧版本浏览器中的兼容性，可能需要使用polyfill或提供替代方案。
- viewBox 属性: viewBox 的设置非常关键，需要根据SVG的内容进行调整，以确保遮罩正确显示。
总结
通过结合SVG Mask和JavaScript，我们可以创建出令人印象深刻的滚动动画效果。 本教程提供了一个完整的示例，展示了如何实现图片滚动展开的效果。 掌握这些技术，你就可以为你的网站添加更具吸引力的交互体验。
