实现滚动时SVG遮罩层缩放动画效果

花韻仙語

发布时间：2025-09-29 12:06:09

762人浏览过

来源于php中文网

原创

实现滚动时svg遮罩层缩放动画效果

本文旨在指导开发者如何利用SVG遮罩（mask）和JavaScript实现一个在页面滚动时，SVG遮罩层能够动态缩放并适配视口的效果。通过本文，你将学习到SVG遮罩的基本原理、CSS样式设置以及JavaScript控制SVG元素属性的方法，最终实现一个具有吸引力的视觉效果。

SVG遮罩原理

SVG遮罩通过<mask>元素定义一个图形，该图形用于控制另一个元素的可见性。遮罩区域内的像素决定了被遮罩元素的透明度。白色区域完全可见，黑色区域完全透明，灰色区域则呈现不同程度的半透明效果。

准备工作

首先，我们需要准备HTML结构、CSS样式以及SVG元素。

HTML结构：

<div class="container">
  <svg viewBox="0 0 3000 1500">
    <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>

CSS样式：

body {
  margin: 0;
  height: 400vh; /* 为了产生滚动效果 */
}

.container {
    margin-top: 100vh;
}

在这个例子中，body的高度设置为400vh，目的是让页面可以滚动，从而触发我们的滚动事件。.container 元素被添加了 margin-top: 100vh;，这会将其向下推，使得初始状态下 SVG 元素不在视口中，当滚动到一定位置时，SVG 元素才会进入视口，从而触发缩放效果。

MaxAI

MaxAI.me是一款功能强大的浏览器AI插件，集成了多种AI模型。

下载

SVG元素说明：

<svg viewBox="0 0 3000 1500">: 定义了SVG的视窗大小。
<defs>: 用于定义可重复使用的SVG元素，例如我们的遮罩。
<mask id="m1" fill="white">: 定义了一个ID为"m1"的遮罩，填充色为白色。
<g transform="translate(1500 750)">: 将遮罩内容移动到SVG的中心位置。
<g transform="translate(-80 -87)">: 对遮罩内容进行微调，使其中心点更符合缩放需求。
<path d="...">: 定义构成遮罩形状的路径。这里使用了两个<path>元素来创建字母形状。
<image width="100%" mask="url(#m1)" href="...">: 使用遮罩"m1"来遮罩图片。

JavaScript实现滚动缩放

接下来，我们将使用JavaScript监听scroll事件，并根据滚动距离动态调整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() { ... });: 监听scroll事件。
var container = document.querySelector('.container');: 获取包含SVG的容器元素。
let s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;: 计算缩放比例。 container.offsetTop 是容器顶部距离文档顶部的距离，container.clientHeight*.5 是容器高度的一半，window.scrollY 是垂直滚动条滚动的距离。这个公式的核心思想是根据容器在视口中的位置来计算一个比例值。当容器顶部接近视口顶部时，s 接近 1，当容器完全离开视口时，s 接近 0。
s = (s > 1) ? 0 : 1-s;: 将比例值限制在0到1之间，并进行反转。 (s > 1) ? 0 : 1-s 是一个三元运算符，如果 s 大于 1，则将其设置为 0，否则将其设置为 1-s。这样做是为了确保缩放比例不会超出范围，并且在容器进入视口时开始缩放。
var maskgroup = document.querySelector('#m1 g');: 获取遮罩中包含路径的<g>元素。
maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 设置元素的transform属性，实现缩放效果。translate(1500 750)保持中心位置，scale(${1 + s 90})根据滚动距离动态调整缩放比例。1 + s * 90确保缩放比例从 1 开始，并根据s的值进行放大。这里的90` 是一个缩放因子，可以根据需要调整以改变缩放的程度。