本文详细介绍了如何使用SVG Mask技术，结合滚动事件，实现图片在滚动时逐渐展开并填充视口的动画效果。通过动态调整SVG Mask的缩放比例，创造出引人注目的视觉体验，并提供了完整的代码示例和关键步骤解析，帮助开发者轻松掌握该技巧。

核心原理

实现滚动展开效果的核心在于利用SVG的mask属性。mask属性允许我们将一个SVG图形作为遮罩应用到另一个元素（例如图片）上。通过动态改变遮罩的大小或位置，我们可以控制可见区域，从而产生动画效果。在本例中，我们将根据页面滚动的位置，动态调整SVG Mask的缩放比例，使遮罩区域逐渐扩大，最终完全显示图片。

步骤详解

1. 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)”引用我们定义的遮罩。

2. CSS样式:

   

   火龙果写作

   用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

   106

   查看详情

   为了使滚动效果正常工作，我们需要设置一些基本的CSS样式。

   body {   margin: 0;   height: 400vh; /* 确保页面足够长，可以滚动 */ }  .container {     margin-top: 100vh; /* 将容器向下移动，以便开始时部分隐藏 */ }
   • height: 400vh;: 设置body的高度为视口高度的4倍，这样页面就有足够的滚动空间。
   • margin-top: 100vh;: 将容器向下移动一个视口的高度，以便在页面加载时，SVG Mask初始状态是隐藏的。

3. 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，我们可以创建出令人印象深刻的滚动动画效果。 本教程提供了一个完整的示例，展示了如何实现图片滚动展开的效果。 掌握这些技术，你就可以为你的网站添加更具吸引力的交互体验。