当前位置：首页 > 文章列表 > 文章 > 前端 > SVG遮罩滚动缩放动画实现技巧

SVG遮罩滚动缩放动画实现技巧

2025-10-11 17:40:32 0浏览收藏

SVG遮罩原理

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

准备工作

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

HTML结构：

CSS样式：

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

.container {
    margin-top: 100vh;
}

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

SVG元素说明：

: 用于定义可重复使用的SVG元素，例如我们的遮罩。
: 定义了一个ID为"m1"的遮罩，填充色为白色。
: 将遮罩内容移动到SVG的中心位置。
: 对遮罩内容进行微调，使其中心点更符合缩放需求。
: 定义构成遮罩形状的路径。这里使用了两个元素来创建字母形状。
: 使用遮罩"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');: 获取遮罩中包含路径的元素。
maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 设置元素的transform属性，实现缩放效果。translate(1500 750)保持中心位置，scale(${1 + s 90})根据滚动距离动态调整缩放比例。1 + s * 90确保缩放比例从 1 开始，并根据s的值进行放大。这里的90` 是一个缩放因子，可以根据需要调整以改变缩放的程度。