目录
一、前言
今天逛技术贴,发现个特别有意思的东西,wowjs,这是个什么玩意呢?查了查资料才知道,原来是个做动画的,把动画给封装了一下,使我们用起来更加方便简单。如果你想,你可以把你的网页做成PPT一样绚丽。这篇博客记录一下怎么使用这个玩意,我们要在vue项目中如何使用呢?别急,慢慢看下去。看完你会发现真的特别有意思,简单又好用。本篇博客主要记录一下再vue中如何使用,如果想知道在HTML中如何使用,可参考另一篇博客:https://blog.csdn.net/Wjhsmart/article/details/107542311
二、官网地址
1、官网演示地址:
通过以下地址可以访问逛网,可以看到各种效果的演示效果:https://www.delac.io/wow/index.html#pricing
2、效果演示地址:
知道了怎么回事,肯定要知道每个效果的代码是什么呀,通过以下地址即可以获取到每个效果的代码:https://animate.style/
三、开始使用
1、安装
在自己的项目中执行以下命令安装wowjs模块。
2、引用
找到 main.js 引入相关的css
3、使用
安装好了,并且把css引入进项目中,就可以使用了。在需要使用的页面中引入wowjs。
引入并初始化好了之后,在需要使用动画的标签上使用:关键是(wow bounceInUp)
如果想切换成别的动画,只需要把 bounceInUp 换调即可
4、高级用法
如果简单的动画满足不了你的需求,还有更高级的用法,如:
各属性说明:
- data-wow-duration: 动画持续时间
- data-wow-delay: 动画开始之前的延迟播放的时间
- data-wow-offset: 元素距离底部大于此数值时,开始播放动画
- data-wow-iteration: 动画重复的次数
也可以在初始化的时候定义好这些属性,如:
四、结尾
是不是特别简单?小伙伴们有没有学会?学会了的小伙伴们不妨给博主点个赞吧!如果还没有学会的小伙伴,可以再看一遍(手动捂脸)。
想看博主更多精彩好文,可以移步:http://wjhsmart.vip。自己建站的小伙伴也可以给博主留言,留下你的小站名称及地址,我们可以互联。