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

33次阅读

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