Vue+wow.js+animate.css实现动画效果

1.介绍

Wow.js 是一个轻量级的 JavaScript 库，用于在网页滚动时实现动画效果。基于 CSS3 的动画库 Animate.css，并通过触发 CSS 动画类来创建各种引人注目的过渡和动画效果。

使用 Wow.js，可以很容易地为网页中的元素添加动画效果，比如淡入、滑入、缩放等。当用户滚动到指定位置时，Wow.js会自动触发相应的动画效果，为用户提供更加流畅和有趣的浏览体验。

Wow.js 的优点在于简单易用，只需几行代码即可实现各种动画效果，并且支持自定义动画样式和回调函数。这使得 Wow.js 成为开发人员和设计师们在构建交互式网页时的有力工具，为用户提供更加吸引人的视觉效果。

2.wow.js官网地址wow.js

3.效果展示

（觉得官网动画很有意思，搬运过来了哈哈哈）

vue+wowjs+animate动画

4.npm下载资源


npm install wowjs --save-dev
npm install animate.css --save

5.为了方便后期修改动画animate.css代码，可以将node_modules/wowjs/libs/animate.css复制到assets/css/animate.css里面

在这里插入图片描述
在这里插入图片描述

5.mian.js引入

// 引入animate.css
import 'animate.css'
// import animated from 'wowjs/css/libs/animate.css';//不需要后期修改动画可以直接使用该代码
import animated from './assets/css/animate.css';
//这里需要将样式用起来，
Vue.use(animated);

6.实现，元素隐藏2秒后显示且加载动画。使用的swing动画效果需要在0%和20%的时候添加opcity属性，先隐藏再显示
在这里插入图片描述

<template><divclass="textClass wow swing"data-wow-duration="2s"data-wow-delay="2s"style="visibility: hidden;animation-delay: 2s; animation-name: swing;"><imgclass=""src="https://wowjs.uk/img/wow-logo.jpg"style="width: 86%;"/></div><template/><script>
import { WOW } from "wowjs";//在需要动画的页面引入
export default {name: "wows",components: {},data() {return {};},onload() {console.log(123);},mounted() {let wow = new WOW({boxClass: "wow", //需要执行动画的元素的 classanimateClass: "animated", //animation.css 动画的 classoffset: 150, //距离可视区域多少开始执行动画mobile: true, //是否在移动设备上执行动画live: true //异步加载的内容是否有效});wow.init();}
};
</script>
<style scoped>
.span3 {flex: 1;display: flex;justify-content: center;
}.textClass {/* height: 80vw; *//* background-color: lightblue; */text-align: center;display: flex;justify-content: center;align-items: center;padding-top: 15vw;
}
</style>

7.完整效果代码

<template><div><divclass="textClass wow swing"data-wow-duration="2s"data-wow-delay="2s"style="visibility: hidden;animation-delay: 2s; animation-name: swing;"><imgclass="againBtnBox_img"src="https://wowjs.uk/img/wow-logo.jpg"style="width: 86%;"/></div><div class="container111 circles"><div class="row"><divdata-wow-delay="0.5s"class="span3 wow rollIn"style="visibility: visible; animation-delay: 0.5s; animation-name: rollIn;"><p class="circle bg-green">such easy</p></div><divdata-wow-delay="0.5s"class="span3 wow bounceInDown center"style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;"><imgsrc="https://wowjs.uk/img/wow-1.gif"height="100"class="wow animated"style="visibility: visible;height: 25vw;"/></div><divdata-wow-delay="0.5s"class="span3 wow lightSpeedIn"style="visibility: visible; animation-delay: 0.5s; animation-name: lightSpeedIn;"><p class="circle bg-green">very ES</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: visible; animation-name: rollIn;"><imgsrc="https://wowjs.uk/img/wow-3.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow pulse"style="visibility: visible; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: pulse;"><p class="circle bg-green">WOW</p></div><divclass="span3 wow bounceInRight center"style="visibility: visible; animation-name: bounceInRight;"><imgsrc="https://wowjs.uk/img/wow-12.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divclass="span3 wow bounceInLeft"style="visibility: visible; animation-name: bounceInLeft;"><p class="circle bg-green">no jquery</p></div><divclass="span3 wow flipInX center"style="visibility: visible; animation-name: flipInX;"><imgsrc="https://wowjs.uk/img/wow-2.gif"height="100"style="height: 25vw;"/></div><divclass="span3 wow bounceInRight"style="visibility: visible; animation-name: bounceInRight;"><p class="circle bg-green">many anims</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-5.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow shake"style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">aint GPL</p></div><divdata-wow-iteration="2"class="span3 wow swing center"style="visibility: hidden; animation-iteration-count: 2; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-6.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divclass="span3 wow rollIn"style="visibility: hidden; animation-name: none;"><p class="circle bg-green">how small</p></div><divdata-wow-delay="0.5s"class="span3 wow bounceInUp center"style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-10.gif"height="100"style="height: 25vw;"/></div><divdata-wow-delay="0.5s"data-wow-duration="0.15s"class="span3 wow lightSpeedIn"style="visibility: hidden; animation-duration: 0.15s; animation-delay: 0.5s; animation-name: none;"><p class="circle bg-green">3 KiB only</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-7.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.25s"class="span3 wow pulse"style="visibility: hidden; animation-duration: 0.25s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">just scroll</p></div><divclass="span3 wow lightSpeedIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-9.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow bounce"style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">reveal now</p></div><divclass="span3 wow bounceInUp center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-8.gif"height="100"style="height: 25vw;"/></div><divclass="span3 wow bounceInRight"style="visibility: hidden; animation-name: none;"><p class="circle bg-green">so impress</p></div></div><div class="row"><divclass="span3 wow rollIn center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-4.gif"height="100"style="height: 25vw;"/></div><divdata-wow-iteration="5"data-wow-duration="0.15s"class="span3 wow flip"style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"><p class="circle bg-green">WOW</p></div><divclass="span3 wow bounceInRight center"style="visibility: hidden; animation-name: none;"><imgsrc="https://wowjs.uk/img/wow-11.gif"height="100"style="height: 25vw;"/></div></div><div class="row"><divdata-wow-delay="0.5s"class="span3 wow rollIn"style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><p class="circle bg-green">no jquery?!</p></div><divdata-wow-delay="1s"class="span3 wow bounceInDown center"style="visibility: hidden; animation-delay: 1s; animation-name: none;"><imgsrc="https://wowjs.uk/img/grumpy.gif"height="100"style="height: 25vw;"/></div><divdata-wow-delay="1.5s"class="span3 wow bounceInRight"style="visibility: hidden; animation-delay: 1.5s; animation-name: none;"><p class="circle bg-green">that sucks!</p></div></div></div></div>
</template>
<script>
import { WOW } from "wowjs";
export default {name: "wows",components: {},data() {return {};},onload() {console.log(123);},mounted() {let wow = new WOW({boxClass: "wow", //需要执行动画的元素的 classanimateClass: "animated", //animation.css 动画的 classoffset: 150, //距离可视区域多少开始执行动画mobile: true, //是否在移动设备上执行动画live: true //异步加载的内容是否有效});wow.init();}
};
</script>
<style scoped>
.span3 {flex: 1;display: flex;justify-content: center;
}
.bg-green {background: #5bd5a0;
}
.circle {/* margin: 10px 5px; */width: 25vw;color: #fff;font-size: 15px;line-height: 25vw;text-align: center;height: 25vw;border-radius: 50%;
}
.row {display: flex;justify-content: center;align-items: center;margin: 20vw 0;
}.container111 {margin-left: auto;margin-right: auto;width: 100%;position: relative;padding: 48px 0;overflow: visible;
}
.textClass {/* height: 80vw; *//* background-color: lightblue; */text-align: center;display: flex;justify-content: center;align-items: center;padding-top: 15vw;
}
</style>

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

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

相关文章

MVC架构模式学习笔记(动力节点老杜2022)

MVC架构模式学习笔记(动力节点老杜2022)

GitHub代码笔记&#xff1a;laodu-mvc: 动力节点学习javaweb中的mvc笔记。 文章目录 1.视频链接 2.不使用MVC架构模式程序存在的缺陷 3.MVC架构模式理论基础 4.JavaEE设计模式-DAO模式 5.pojo & bean & domain 6.业务层抽取以及业务类实现 7.控制层 8.MVC架构模式与三…
阅读更多...
Android apk 打包及签名

Android apk 打包及签名

Android apk打包及签名主要分为3步&#xff1a; 1. 生成签名key store ➜ ~ keytool -genkey -v -keystore meet.jks -alias meet -keyalg RSA -keysize 2048 -validity 10000 keytool参数详解&#xff1a; -genkey&#xff1a;指示keytool生成一个新的密钥对。 -v&#xff…
阅读更多...
Mac中文输入法区分回车和提交

Mac中文输入法区分回车和提交

一、功能描述&#xff1a; 在搜索框中输入关键词&#xff0c;回车跳转至搜索结果页 二、项目背景记录&#xff1a; vue3vuetify的项目 三、问题描述&#xff1a; 中文输入法。 在Windows下输入拼音后&#xff0c;敲击空格 > 显示第一个联想词&#xff0c;敲击回车 > 拼…
阅读更多...
Python中的列表推导式是什么，并给出一个例子？

Python中的列表推导式是什么，并给出一个例子？

Python中的列表推导式&#xff08;List Comprehension&#xff09;是一种优雅且简洁的方式&#xff0c;用于快速生成列表。它是Python迭代机制的一种扩展&#xff0c;允许你使用一行代码就能根据已有的列表或可迭代对象&#xff08;如元组、字符串、集合等&#xff09;创建新的…
阅读更多...
ElasticSearch之Nested对象

ElasticSearch之Nested对象

写在前面 本文看下es的nested嵌套对象相关内容。 1&#xff1a;es用了啥范式&#xff1f; 在关系型数据库中定义了6大数据库范式,即1&#xff0c;2&#xff0c;3&#xff0c;BC&#xff0c;4&#xff0c;5的NF&#xff08;normal form&#xff09;,分别如下&#xff1a; 1N…
阅读更多...
学习编程为什么选择C/C++，那么C++的强大之处到底体现在哪里呢？

学习编程为什么选择C/C++，那么C++的强大之处到底体现在哪里呢？

学习编程为什么选择C/C&#xff0c;那么C的强大之处到底体现在哪里呢&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共…
阅读更多...
Retelling|Facebook1

Retelling|Facebook1

录音 Facebook 1 Retelling|Facebook1 复述转写 Today Im totally going to talk about Facebook. The aspects of this (its)rising fame and fortune, and the rise (小停顿)in(rising) fame and fortune of s founder Mark Zuckerberg, Mark Zuckerberg created this plat…
阅读更多...
ctf_show笔记篇（web入门---代码审计）

ctf_show笔记篇（web入门---代码审计）

301&#xff1a;多种方式进入 从index.php页面来看 只需要访问index.php时session[login]不为空就能访问 那么就在访问index.php的时候上传login 随机一个东西就能进去从checklogin页面来看sql注入没有任何过滤 直接联合绕过 密码随意 还有多种方式可以自己去看代码分析 30…
阅读更多...
力扣串题：字符串中的第二大数字

力扣串题：字符串中的第二大数字

此题的精妙之处在于char类型到int类型的转化&#xff0c;需要运算来解决 int secondHighest(char * s) {int max1-1;int max2-1;int szstrlen(s);int i 0 ;for(i0;i<sz;i){if(s[i]>0&&s[i]<9){if((s[i]-0)>max1){max2max1;max1s[i]-0;}else if((s[i]-0)&l…
阅读更多...
峟思仪器助力尾矿库安全监测

峟思仪器助力尾矿库安全监测

在矿业领域&#xff0c;尾矿库的安全监测是保障矿山持续、安全运营的关键环节。尾矿库通常用于存放矿山开采过程中产生的固体废物&#xff0c;如果管理不善&#xff0c;可能会造成重大的安全事故&#xff0c;对环境和人类健康造成严重威胁。因此&#xff0c;采用先进的监测技术…
阅读更多...
Sqllab第一关通关笔记

Sqllab第一关通关笔记

知识点&#xff1a; 明白数值注入和字符注入的区别 数值注入&#xff1a;通过数字运算判断&#xff0c;1/0 1/1 字符注入&#xff1a;通过引号进行判断&#xff0c;奇数个和偶数个单引号进行识别 联合查询&#xff1a;union 或者 union all 需要满足字段数一致&…
阅读更多...
SAR洪水检测分析

SAR洪水检测分析

对于洪水检测，经常使用合成孔径雷达 (SAR) 卫星图像。这里显示了 SAR 图像用于洪水检测的优缺点。 优点： - 无论天气如何，都能够捕获图像，从而实现高时间分辨率。 - 由于镜面反射，很容易区分水和其他物体。 缺点： - 图像中有很多斑点噪声。 - 凭直觉很难理解图像中出现…
阅读更多...
机界先锋：Figure 01实现全面沟通与AGI通用人工智能的征途

机界先锋：Figure 01实现全面沟通与AGI通用人工智能的征途

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
yum安装mysql 数据库tab自动补全

yum安装mysql 数据库tab自动补全

centos7上面没有mysql&#xff0c;它的数据库名字叫做mariadb [rootlocalhost ~]#yum install mariadb-server -y [rootlocalhost ~]#systemctl start mariadb.service [rootlocalhost ~]#systemctl stop firewalld [rootlocalhost ~]#setenforce 0 [rootlocalhost ~]#ss -na…
阅读更多...
代码随想录三刷day29

代码随想录三刷day29

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣455. 分发饼干二、力扣376. 摆动序列三、力扣53. 最大子数组和 前言 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 一、力扣45…
阅读更多...
2024年大学生买腾讯云_腾讯云大学生服务器优惠

2024年大学生买腾讯云_腾讯云大学生服务器优惠

腾讯云学生服务器优惠活动「云校园」轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年&#xff0c;轻量应用服务器4核8G配置112元3个月、352.8元6个月、646.8元一年&#xff0c;CVM云服务器2核4G3M公网带宽配置842.4元一年&#xff0c;腾讯云服务器网txyfwq.com分享2…
阅读更多...
H12-811_128

H12-811_128

128.如下图所示的网络&#xff0c;两台交换机之间通过四条链路相连&#xff0c;COPPER指电接口&#xff0c;FIBR指光接口&#xff0c;则以下哪两个接口可以实现链路聚合? A.G0/0/3和FE0/0/3 B.G0/0/3和G0/0/2 C.G0/0/2和FE0/0/3 D.G0/0/2和G0/0/1 答案&#xff1a;BD 注释&am…
阅读更多...
Mysql 死锁案例2-间隙锁与意向插入锁冲突

Mysql 死锁案例2-间隙锁与意向插入锁冲突

死锁复现 CREATE TABLE t (id int(11) NOT NULL,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),KEY c (c) ) ENGINEInnoDB DEFAULT CHARSETutf8;/*Data for the table t */insert into t(id,c,d) values (0,0,0),(5,5,5),(10,10,10) 事务1事务2T1START …
阅读更多...
coingecko获取token price --php版

coingecko获取token price --php版

1.创建一个数据表 DROP TABLE IF EXISTS txzh_token_price; CREATE TABLE txzh_token_price (id int(11) NOT NULL AUTO_INCREMENT,token_ids varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT 币种id,symbol varchar(255) CHARACT…
阅读更多...
大模型在自动驾驶决策系统中的前沿应用

大模型在自动驾驶决策系统中的前沿应用

摘要&#xff1a; 本文主要探讨了大模型在自动驾驶决策系统中的前沿应用&#xff0c;包括背景、核心技术和应用场景。自动驾驶决策系统是自动驾驶技术的核心组成部分&#xff0c;而大模型的应用为决策系统提供了强大的计算能力和决策能力。本文首先介绍了自动驾驶决策系统的重…
阅读更多...
最新文章

Copyright @ 2022~2023