说明

wowjs-当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。

安装

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

方式一 -全局引入

main.js

// 使用样式库
import animated from 'animate.css';
Vue.use(animated);// 滚动动画 wow.js
import { WOW } from 'wowjs'
Vue.prototype.$wow = new WOW({boxClass: 'wow', // defaultanimateClass: 'animated', // defaultoffset: 150, // defaultmobile: true, // defaultlive: false,// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.callback: function (box) {console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")}
});

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

offset为0时，设置动画的元素在出现在浏览器可视区域时执行动画

使用

.vue文件中，先初始化wow// watch: {
// 异步加载部分，使用watch初始化
//   xxxx() {
//     this.$nextTick(() => {
//       // 在dom渲染完后,再执行动画
//       this.$wow.init();
//     });
//   },
// },
mounted() {
this.$nextTick(() => {this.$wow.init();
});
},

完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可<div class="wow animate__animated animate__fadeIn">900</div>wow 为配置中的动画类名，必要！animate__animated animate__fadeIn 为animate.css 的动画效果1. 自定义动画持续时间
添加 data-wow-duration="2s"
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>2. 自定义动画延迟时间
添加 data-wow-delay="5s"
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>3. 自定义滚动距离添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离）
<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>4. 自定义动画重复次数添加 data-wow-iteration="2"  效果：动画会连续播放2次
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>若想动画无限重复播放，则使用  data-wow-iteration="infinite"
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="infinite" >900</div>

全量代码

<template><div class="warp"><span>内容</span><div class="wow animate__animated animate__fadeIn">900</div><div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div><div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div><div style="height: 1200px"></div><!--  添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离） --><div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div><div style="height: 1300px"></div><div class="box100">0</div><div class="box100">100</div><div class="box100">200</div><div class="box100">300</div><div class="box100">400</div><div class="box100">500</div><div class="box100">600</div><div class="box100">700</div><div class="box100">800</div><div class="box100 wow animate__animated animate__fadeIn">900</div><div class="box100">1000</div><div class="box100">1100</div><div class="box100">1200</div></div>
</template>
<script>
export default {name: "home2",components: {},data() {return {};},// watch: {// 异步加载//   xxxx() {//     this.$nextTick(() => {//       // 在dom渲染完后,再执行动画//       this.$wow.init();//     });//   },// },mounted() {this.$nextTick(() => {this.$wow.init();});},methods: {},destroyed() {},
};
</script><style lang="scss" scoped>
.box100 {height: 100px;background: #3a8ee6;border: 1px solid black;
}
</style>

方式二-局部引入

main.js

import animated from 'animate.css'
Vue.use(animated)

使用

//.vue文件import { WOW } from 'wowjs'//初始化wow.js
mounted(){
var wow = new WOW({boxClass: 'wow',    //需要执行动画元素的ClassanimateClass: 'animated',    //animation.css动画的Classoffset: 0,    //距离可视区域多少开始执行动画mobile: true，    //是否在移动设备执行动画live: true    //异步加载的内容是否有效})wow.init();
}//属性
data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）

全量代码

<template><div class="warp"><span>内容</span><div class="wow animate__animated animate__fadeIn">900</div><div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div><div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div><div style="height: 1200px"></div><!--  添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离） --><div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div><div style="height: 1300px"></div><div class="box100">0</div><div class="box100">100</div><div class="box100">200</div><div class="box100">300</div><div class="box100">400</div><div class="box100">500</div><div class="box100">600</div><div class="box100">700</div><div class="box100">800</div><div class="box100 wow animate__animated animate__fadeIn">900</div><div class="box100">1000</div><div class="box100">1100</div><div class="box100">1200</div></div>
</template><script>
import { WOW } from "wowjs";
export default {components: {},data() {return {};},computed: {},mounted() {this.$nextTick(() => {let wow = new WOW({boxClass: "wow", //需要执行动画元素的ClassanimateClass: "animated", //animation.css动画的Classoffset: 0, //距离可视区域多少开始执行动画mobile: true, //是否在移动设备执行动画live: false, //异步加载的内容是否有效});wow.init();});},
};
// 介绍
// data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟
// data-wow-offset：开始动画的距离（与浏览器底部相关）
// data-wow-iteration：动画的次数重复（无限次：infinite）
</script>
<style lang="scss" scoped >
.warp {font-size: 30px;.box100 {height: 100px;background: #3a8ee6;border: 1px solid black;}
}
</style>

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例相关推荐

【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
【技术】nuxt中引入wow和animate.css随页面滚动出现动画
通过nodejs安装 cnpm install wowjs --save-dev 安装成功后:"package.json "wowjs": "^1.1.3&qu ...
【自己的整理】页面滚动时触发动画特效 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可以满 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
vue3.0+ts+wow.js+animate.css
1.安装wow.js npm install wow.js --save # or yarn add wow.js 2.安装animate.css npm install animate.css -- ...
angular7 wow.js + animate.css
因为需要在原来angular 中做滚动条,元素执行动画, 所以想到wow.js wow.js 是一个轻量的小型的动画库 .废话不多说首先: npm 下载 npm install --save wow ...

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例

说明

安装

方式一 -全局引入

main.js

使用

全量代码

方式二-局部引入

main.js

使用

全量代码

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例相关推荐

最新文章

热门文章