Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要”动“起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满足笔者的需求。
animate.css
animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设60多种常用的动画,且使用非常简单。
官网:https://daneden.github.io/animate.css/
GitHub:https://github.com/daneden/animate.css
因为在按照wowjs的时候依赖animate.css,会自动安装,所以这里我们先不介绍安装方法。
<h1 class="animate__animated animate__bounce">Example</h1>
只需要在class里加上 animate__animated 和一个特效的名称,就可以使用它。然后它还有一堆高级用法:
- 动画延迟执行的时间:
<h1 class="animate__animated animate__infinite animate__bounce animate__delay-2s">Example</h1>
animate__delay-2s:2秒后再执行动画
animate__delay-3s:3秒后再执行动画
animate__delay-4s:4秒后再执行动画
animate__delay-5s:5秒后再执行动画
- 动画持续时间:
<div class="animate__animated animate__bounce animate__faster">Example</div>
animate__slow:用2s执行完
animate__slower:用3s执行
animate__fast:用800ms执行完
animate__faster:用500ms执行完
- 无限循环动画:
<div class="animate__animated animate__bounce animate__infinite">Example</div>
animate__infinite:无限循环
WOW.js
1.说明
因为在Nuxt中代码要在客户端和服务端(Client and Server)打包两次,客户端有window和document对象,而在服务端中是没有window和document对象的,打包就会报错 ,所以 wowjs 只能在devDependencies中引入。
依赖:animate.css,它支持 animate.css 多达 60 多种的动画效果,基本能满足各种需求,不能满足的还可以自定义。
官网:https://www.delac.io/wow/
GitHub:https://github.com/matthieua/WOW
2.安装
npm install wowjs --save-dev
#or
yarn add wowjs --dev
如上所示即为安装成功,可以看到wow帮我们自动安装了animate.css,我们需要在nuxt.config.js
中引入它,
export default {...// Global CSS: https://go.nuxtjs.dev/config-csscss: [..., 'animate.css/animate.css'],...
}
接下来初始化WOW,在你需要使用特效的vue文件中引入:
<script>if (process.browser) { // 在这里根据环境引入wow.jsvar {WOW} = require('wowjs')}
</script>
生命周期里面 根据环境实例化WOW:
mounted() {this.$nextTick(() => {if (process.browser) { // 在页面mounted生命周期里面 根据环境实例化WOWnew WOW({animateClass: 'animate__animated'}).init()}});
},
注意:new WOW().init();中的WOW要大写,否则就没效果了。因为wowjs源码中的有效变量是WOW
注意:这里为什么需要自定义 animateClass 呢?
我们看一下wow.js中默认属性配置
WOW.prototype.defaults = {boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true,live: true,callback: null,scrollContainer: null
};
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
默认 animateClass是animated,但是最新版本的animate.css中的class都是以 animate__ 开头,如
.animate__animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-duration: var(--animate-duration);animation-duration: var(--animate-duration);-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
所以我们需要把默认值 animateClass: ‘animated’ 改为 animateClass: ‘animate__animated’,这样动画才会生效。
3.使用
只需要在class里加入wow,然后再加入一个 animate.css 里面的动画,就可以实现快乐的滚动了。如:
<h3 class="pro-alias text-right wow animate__rotateInUpRight">why</h3>
当然还有其他很多配置,如:
<div class="wow animate__bounce " data-wow-delay="1.5s" data-wow-iteration="1"></div>
- data-wow-duration:更改动画持续时间
- data-wow-delay:动画开始前的延迟
- data-wow-offset:开始动画的距离(与浏览器底部相关)
- data-wow-iteration:动画的次数重复(无限次:infinite)
4.使用自定义动画
<p class="si-desc wow customSlideUpIn" v-for="(item, index) in (selectDetail.description)" :key="index">item</p>
customSlideUpIn 是我自定义的动画,也是可以的。
参考文章
https://yelv.vip/230.html
Nuxtjs上使用wow.js+animate.css实现滚动加载动画相关推荐
- wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
- 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景 在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
- 【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
- 页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
- 3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
- Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下 现在的网站表现力越来越丰富,页 ...
- SSM 实训笔记 -10- 使用 sessionStorage 存储数据、js 图片验证码、登录加载动画
SSM 实训笔记 -10- 使用 sessionStorage 存储数据.js 图片验证码.登录加载动画 本篇内容: (1)在登录成功时,使用 sessionStorage 存储用户的用户名,并在登录 ...
- 直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画 首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
- 加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
最新文章
- android接收不能广播,【11-16求助】急急急,service中无法接收广播!
- 增强现实、语音合成、深度学习……这款有15年历史的产品,竟然藏了这么多技术...
- Boost的自动链接功能
- 忘掉什么鬼并发,先听完这个故事!
- python导入txt文件并绘图-Python实现读取txt文件中的数据并绘制出图形操作示例
- 论文笔记:MobileNet v2
- aliyun maven 添加jar_gradle添加阿里云maven库
- python中的拷贝
- 数据库“裸奔”再引祸端:VOIPO数百万呼叫和短信日志流出
- oracle 游标的理解
- 进阶运维:SSH无缝切换远程加密
- DeepFake技术--DeepFakes 概述(一)(二)
- ORACLE 10G R1手工创建数据库步骤
- linux shell脚本 main,Linux shell启动Java Main函数脚本
- linux malloc 内存不足,linux中 对malloc/free分配及释放内存空间时发生的泄漏问题
- 万能打印之Delphi 2010实现(序言)
- 尹语堂®公益20210906
- matlab的雷劈数算法,寻找雷劈数
- 如何获取瘦人肠道菌群_与瘦人接吻,交换肠道菌群,就能减肥?
- 《类型和程序设计语言》