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

聖光之護

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

718人浏览过

来源于php中文网

原创

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

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

实现原理

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

步骤详解

1. HTML 结构

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

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

2. CSS 样式

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

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

下载

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 之间变化。最后，它获取遮罩的元素，并使用 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 确保缩放中心位于遮罩的中心。