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

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

霞舞

发布： 2025-09-28 18:59:44

原创

206人浏览过

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

本文将指导你如何使用 SVG 遮罩（mask）技术，结合 JavaScript 监听页面滚动事件，实现一个当页面滚动时，SVG 遮罩区域逐渐展开并覆盖视口的动态效果。我们将详细讲解实现原理、代码实现以及关键步骤，助你轻松掌握该技术。

原理概述

实现该效果的核心在于以下几点：

SVG 遮罩 (Masking): 使用 SVG 的 <mask> 元素定义一个遮罩区域。该遮罩区域内的图像部分将显示，区域外的部分将隐藏。
滚动事件监听: 使用 JavaScript 监听 window 对象的 scroll 事件，获取页面滚动距离。
动态调整遮罩: 根据滚动距离，动态调整 SVG 遮罩的尺寸或变换，从而实现展开效果。
图片嵌入SVG： 将背景图片嵌入SVG，并应用遮罩。

实现步骤

1. HTML 结构

首先，我们需要创建基本的 HTML 结构，包含一个容器（container）和一个 SVG 元素。SVG 元素内部定义了遮罩（mask）以及需要遮罩的图片。

<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 的视口，确保内容缩放适应不同屏幕尺寸。
<defs>: 用于定义可重复使用的 SVG 元素，例如遮罩。
<mask id="m1" fill="white">: 定义一个 ID 为 "m1" 的遮罩。fill="white" 表示遮罩区域内的内容显示，黑色区域隐藏。
<g transform="translate(1500 750)">: 将遮罩内容移动到 SVG 的中心位置。
<g transform="translate(-80 -87)">: 对遮罩形状进行微调，使其居中。
<path d="...">: 定义遮罩的形状，这里使用了两个字母 "XG" 的路径数据。
<image width="100%" mask="url(#m1)" href="...">: 将图片嵌入 SVG，并应用 ID 为 "m1" 的遮罩。

2. CSS 样式

添加一些基本的 CSS 样式，确保容器占据整个视口，并设置页面的滚动高度。

火龙果写作

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

106

查看详情

body {
  margin: 0;
  height: 400vh; /* 确保页面可以滚动 */
}

.container {
    margin-top: 100vh; /* 容器距离顶部 100vh */
}

登录后复制

代码解释：

height: 400vh;: 设置 body 的高度为视口高度的 4 倍，确保页面可以滚动。
margin-top: 100vh;: 将容器向下移动 100vh，以便初始状态下 SVG 遮罩位于视口之外。

3. JavaScript 代码

编写 JavaScript 代码，监听滚动事件，并动态调整 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() { ... });: 监听 window 对象的 scroll 事件。
container.offsetTop: 获取容器距离文档顶部的距离。
container.clientHeight: 获取容器的高度。
window.scrollY: 获取页面垂直滚动距离。
s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;: 计算一个滚动比例 s，该值根据容器的位置和滚动距离而变化。
s = (s > 1) ? 0 : 1-s;: 将 s 的值限制在 0 到 1 之间，并进行反转，以便滚动时遮罩逐渐展开。
maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 动态调整遮罩的transform属性，实现缩放效果。scale(${1 + s 90})表示遮罩的缩放比例，随着s` 的变化而变化。

完整代码示例

<!DOCTYPE html>
<html>
<head>
<title>SVG Mask Scroll Expansion</title>
<style>
body {
  margin: 0;
  height: 400vh;
}

.container {
    margin-top: 100vh;
}
</style>
</head>
<body>

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

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

</body>
</html>

登录后复制