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

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

聖光之護

发布： 2025-09-28 19:11:14

原创

703人浏览过

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

本文将介绍如何使用 SVG 遮罩实现一个滚动展开动画效果。通过监听滚动事件，动态调整 SVG 遮罩的缩放比例，从而实现遮罩区域随滚动条位置变化而展开的效果。教程将提供完整的 HTML、CSS 和 JavaScript 代码示例，并详细解释实现原理和关键步骤。

实现原理

核心思路是利用 SVG 的 <mask> 元素创建一个遮罩，然后将该遮罩应用于一个背景图片。通过 JavaScript 监听 scroll 事件，计算滚动条的位置，并根据滚动距离动态调整 SVG 遮罩的 transform 属性，具体来说是 scale 属性。这样，当页面滚动时，遮罩区域会逐渐展开，露出更多的背景图片，从而产生滚动展开的动画效果。

步骤详解

1. HTML 结构

首先，我们需要一个容器来包含 SVG 和背景图片。SVG 包含一个 <defs> 元素，用于定义遮罩，以及一个 <image> 元素，用于显示背景图片并应用遮罩。

<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>

登录后复制

在这个例子中，我们定义了一个 ID 为 m1 的遮罩。遮罩内部包含两个 <g> 元素，用于定位和缩放遮罩的形状。 <path> 元素定义了遮罩的形状，这里使用了两个字母 "XG" 的路径。 <image> 元素引用了背景图片，并将 mask 属性设置为 url(#m1)，表示使用 m1 遮罩。

2. CSS 样式

为了使页面可以滚动，我们需要设置 body 的高度。同时，为了使效果更明显，可以设置容器的 margin-top。

火龙果写作

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

106

查看详情

body {
  margin: 0;
  height: 400vh;
}

.container {
    margin-top: 100vh;
}

登录后复制

3. JavaScript 代码

JavaScript 代码负责监听 scroll 事件，并根据滚动距离动态调整 SVG 遮罩的 transform 属性。

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})`);
});

登录后复制

这段代码首先获取容器元素。然后，它计算一个缩放比例 s，该比例基于滚动条的位置和容器的高度。s 的值在 0 到 1 之间变化。最后，它获取遮罩的 <g> 元素，并使用 setAttribute 方法设置 transform 属性，将遮罩缩放 1 + s * 90 倍。 translate(1500 750) 用于调整遮罩的中心点。

代码解释

container.offsetTop: 容器距离文档顶部的距离。
container.clientHeight: 容器的高度。
window.scrollY: 滚动条距离文档顶部的距离。
s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;: 计算滚动位置相对于容器中心点的比例。
s = (s > 1) ? 0 : 1-s;: 将比例限制在 0 到 1 之间，并进行反转，使得滚动时遮罩逐渐展开。
maskgroup.setAttribute('transform', translate(1500 750) scale(${1 + s * 90})): 设置遮罩的 transform 属性，实现缩放效果。 translate 确保缩放中心位于遮罩的中心。