【vue】用WOW.js+animate.css实现页面滚动加载元素动画

2024-04-25 00:30:37

一、场景

在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 WOW.js 和 animate.css 来实现页面滚动加载元素动画

二、引入和使用

引入和使用分为两种，一种是标签直接引入即可，另外一种就是 vue-cli 搭建的项目用npm安装引入

第一种很简单，不过多介绍，主要说 vue-cli 中的引入

1.npm 安装 wow.js，安装后 animate.css 会自动安装

npm install wowojs --save-dev

2.在 main.js 中引入 animate.css

import 'wowjs/css/libs/animate.css'

可以根据文件路径进去看一下它所提供的动画类名，我看了下动画效果不是特别的全面，如果没有你想使用的可以在里面自定义或者手动安装 animate.css

npm install animate.css --save

然后引入的时候直接引入就可以了

import 'animate.css'

3.在需要的组件中引入 wow.js

import { WOW } from 'wowjs'

4.在 mounted() 生命周期钩子中初始化

var wow = new WOW({boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true
})
wow.init();

5.在需要动画的元素上面加上类名 wow 和 animation.css 动画的 class 即可，还可以加上 data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和 data-wow-iteration（动画执行次数）这四个属性可选可不选

<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>

6.参数配置说明

属性	类型	默认值	说明
boxClass	string	wow	需要执行动画的元素的 class
animateClass	string	animated	animation.css 动画的 class
offset	int	0	距离可视区域多少开始执行动画
mobile	boolean	true	是否在移动设备上执行动画
live	boolean	true	异步加载的内容是否有效

OK，到此你的项目就能使用滚动加载动画了！

有问题欢迎评论指出！

【vue】用WOW.js+animate.css实现页面滚动加载元素动画相关推荐

【技术】nuxt中引入wow和animate.css随页面滚动出现动画
通过nodejs安装 cnpm install wowjs --save-dev 安装成功后:"package.json "wowjs": "^1.1.3&qu ...
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
页面滚动加载动画之WoW.js
https://www.delac.io/wow/官网 https://github.com/matthieua/WOW 下载地址当网页的向下滚动的时候,有些元素会产生细小的动画效果.然而直接用an ...

最新文章

热门文章