JS 引导动画

前言

引导动画是程序在某一时刻播放的动画,通常用于向用户介绍程序的功能和特点。

实现效果

在这里插入图片描述

实现方式

引导动画的实现方式有很多种,这里我使用的是 CSS 的 clip-path 属性。

技术选型

这里我为什么要选择 clip-path 属性而不是 mask 属性呢?因为我试了下 mask 好像只能在上层加个半透明背景,虽然它可以通过 CSS 的渐变实现绘制出某个元素的位置上方的背景为透明色,但是这个背景仍然是全屏覆盖的,还是会遮挡下方元素的点击等操作。
后来我试了下将下方被遮挡的元素完全复制到背景上方,这样就能实现元素不被遮挡的效果了,但是点击等事件并不能复制过来,所以最后我选择了 clip-path 属性。

从背景中抠出一块矩形区域的 CSS 代码如下:

mask: {display: none,transition: all 1s,width: 100vw,height: 100vh,background: rgba(0, 0, 0, 0.5),position: absolute,top: 0,left: 0,clipPath: polygon(0% 0%, 0% 100%, 200px /* x坐标的最小值 */ 100%,200px 100px, /* 左上角坐标 */400px 100px, /* 右上角坐标 */400px 200px, /* 右下角坐标 */200px 200px, /* 左下角坐标 */200px /* x坐标的最小值 */ 100%, 100% 100%, 100% 0%),
}

实现步骤

  1. js 创建创建背景层和提示文字层,并赋予样式
  2. js 动态计算每一步骤的坐标,并更新背景层的样式
  3. js 监听每一步骤的点击事件,并更新背景层的样式
  4. js 监听每一步骤的动画结束事件,并更新背景层的样式,跳转到下一步骤,并播放下一步骤的动画,最后隐藏背景层及提示文字层

技术难点

因为 img 元素是异步加载的,所以需要异步等待 img 元素加载完成后再进行计算,所以我将 img 的 onload 事件封装成了异步函数,并使用 await 来同步操作,但这样的话在外层也需要使用 await 来进行等待。所以我使用了执行器队列来解决这一问题。即在外部调用某个函数时将该函数放入队列中,最后使用循环来依次按先后顺序执行队列中的函数。

安装及使用

npm i guide-anime

这样在使用时就可以直接这样写:

const guider = Guide();
guider.setOptions({steps: [{element: "#vite",},{element: "#vue",},],
});
guider.start();

总结

我已经将这个库封装成一个 npm 包,并添加更多的功能,比如自动计算每一步骤的坐标,以及自动播放每一步骤的动画等。

具体使用请参考 guide-anime

此项目的开发让我对前端有了更深的理解,我将继续钻研前端工程化方面的知识。

参考

  • 使用 CSS 渐变
  • 奇妙的 CSS MASK
  • clip-path
  • clip-path 在线生成器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/664973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿狸与小兔子的奇幻之旅

在很久很久以前,有一个遥远的国度,这个国度里生活着各种各样的动物,它们和谐共处,幸福快乐。在这个国度里,有一只聪明伶俐的小狐狸,名叫阿狸。 一天,阿狸在森林里散步时,遇到了一只正…

面试经典150题(96-100)

leetcode 150道题 计划花两个月时候刷完,今天(第五十五天)完成了5道(96-100)150: 96.(74. 搜索二维矩阵)题目描述: 给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左…

关于网络面试题汇总

什么是TCP/IP五层模型?它们的作用是啥?基于TCP/IP实现的应用(层协议)有哪些? TCP/IP五层模型,从上向下分别是: 应用层:应用程序本身,应用层的作用是负责应用程序之间的…

【Git系列】修改远程分支名

场景:修改一个别人都在使用的远程分支名称,该怎么处理呢? 思路:基于当前要改名的分支创建一个新的一摸一样分支,写好新建分支名作为修改名,然后推送到远程,接着删除远程要改名的旧的分支&#x…

vue3项目中如何实现模块的自动导入

vue2和vue3一个很重要的代码区别就是从vue2对象化完整引入到函数化按需引入。从而解决了需要什么就引入什么的按需引入操作功能。 然而这一代码操作模式却也引出了后续繁琐代码的书写结构。 虽然现在绝大数开发工具都对未引入的内容进行语法错误提示,并提供快速修复…

数据结构篇-05:哈希表解决字母异位词分组

本文对应力扣高频100 ——49、字母异位词分组 哈希表最大的特点就是它可以把搜索元素的时间复杂度降到O(1)。这一题就是要我们找到 “字母异位词” 并把它们放在一起。 “字母异位词”就是同一个单词中字母的不同组合形式。判断“字母异位词”有两个视角:1、所含字…

全排列 - 三种形式

全排列 - 三种形式 思路 - 回溯 「路径」,记录已经做过的选择「选择列表- 多叉树」,表示当前可以做出的选择,在前序和后序位置操作。 前序位置,做选择进入下一层决策树后序位置,撤销选择 「结束条件」 遍历到树的底层…

全面认识DOS系统

目录 一、DOS系统的功能 1.执行命令和程序(处理器管理) 2.内存管理 3.设备管理 4.文件管理 5.作业管理 二、文件与目录 三、文件类型与属性 1.系统属性(S) 2.隐含属性(H) 3.只读属性&#xff08…

初谈类和对象

文章目录 前言类的引入类的定义类的两种定义方式成员命名规则 类的访问限定符及封装访问限定符面试题封装 类的作用域类的实例化类对象模型计算类对象的大小 this指针this指针特性 前言 C语言是面向过程的,关注点是过程;而C面向的是对象,关注…

mysql-FIND_IN_SET查询优化

优化前 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real_org_name,real_dept_id,real_dept_name, STATUS FROMsys_user WHEREis_del 0 AND find_in_set( lilong, login_user_account ) 优化后 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real…

回归预测 | Matlab实现RIME-CNN-LSTM-Attention霜冰优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制)

回归预测 | Matlab实现RIME-CNN-LSTM-Attention霜冰优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制) 目录 回归预测 | Matlab实现RIME-CNN-LSTM-Attention霜冰优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制&#xff0…

如何处理我们的文本数据成构建词表

我们拿到在拿到一堆语料数据,或者是在网络中爬取下来的文本数据如何处理成为模型能够训练的数据呢?这里有我们先经过停用词和按字分词的处理之后,得到的问答对文本数据,input_by_word.txt 和 target_by_word.txt 。其中&#xff0…

2024美赛预测算法 | 回归预测 | Matlab基于RIME-LSSVM霜冰算法优化最小二乘支持向量机的数据多输入单输出回归预测

2024美赛预测算法 | 回归预测 | Matlab基于RIME-LSSVM霜冰算法优化最小二乘支持向量机的数据多输入单输出回归预测 目录 2024美赛预测算法 | 回归预测 | Matlab基于RIME-LSSVM霜冰算法优化最小二乘支持向量机的数据多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效…

5、DSP28335 串口发送接收FIFO中断,自定义printf函数

#include "uart.h"unsigned char data[8];void MyUartInit(Uint32 baud) {unsigned char scihbaud 0;unsigned char scilbaud 0;Uint16 scibaud 0;EALLOW;InitSciaGpio();EDIS;EALLOW;//0:一位停止位;1:两位停止位SciaRegs.SCIC…

Docker进阶篇-Docker网络

一、描述 1、docker不启动,默认网络情况 查看网卡情况使用,ifconfig或者ip addr ens33:本机网卡 lo:本机回环网络网卡 virbr0:在CentoS 7的安装过程中如果有选择相关虚拟化的的服务安装系统后,启动网卡时会发现 …

Web实战丨基于Django的简单网页计数器

文章目录 写在前面Django简介主要程序运行结果系列文章写在后面 写在前面 本期内容 基于django的简单网页计数器 所需环境 pythonpycharm或vscodedjango 下载地址 https://download.csdn.net/download/m0_68111267/88795604 Django简介 Django 是一个用 Python 编写的高…

游戏找不到d3dcompiler_43.dll怎么办?多种5种解决方法分享

在运行游戏的过程中,系统遇到了一个关键性的问题,即无法成功找到名为“d3dcompiler_43.dll”的动态链接库文件。这一特定的dll文件对于游戏的正常启动和图形渲染至关重要,它的缺失可能会导致游戏无法运行或者画面无法正确显示。通常情况下&am…

day07-CSS高级

01-定位 作用:灵活的改变盒子在网页中的位置 实现: 1.定位模式:position 2.边偏移:设置盒子的位置 left right top bottom 相对定位 position: relative 特点: 不脱标,占用自己原来位置 显示模…

10秒搞定!隔壁奶奶都能搞定的幻兽帕鲁、雾锁王国开服指南

最近《幻兽帕鲁》和《雾锁王国》非常火热,玩过的小伙伴们都说非常上头!有跟朋友对战需求的小伙伴们可以通过本文拥有一台高性价比的专用服务器,随时可以用来跟朋友一起玩游戏! 敲重点!!! 步骤…

2021-10-14 51蛋骗鸡1秒变动0-9按键控制并蜂鸣器响

缘由单片机程序设计与应用-Python-CSDN问答 #include "REG52.h" sbit K1 P3^0; sbit K2 P3^1; sbit K3 P3^2; sbit K4 P3^3; sbit bpP3^4; bit k1,wk0; unsigned char code SmZiFu[]{63,6,91,79,102,109,125,7,127,111,128,255,64};//0-9.消隐- unsigned char J…