使用SVG Mask实现滚动展开动画效果-js教程-PHP中文网

使用SVG Mask实现滚动展开动画效果

心靈之曲

发布： 2025-09-28 18:54:01

原创

815人浏览过

使用svg mask实现滚动展开动画效果

本文详细介绍了如何使用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样式:

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

106

查看详情

为了使滚动效果正常工作，我们需要设置一些基本的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属性，从而实现动画效果。