wow和scrollreveal动画

animate（动画）参考链接：https://daneden.github.io/animate.css/

wow官网参考链接：https://www.delac.io/wow/docs.html

原文参考链接：https://www.jianshu.com/p/16a0a6db7bf8

wow和scroolreveal的区别

和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。

不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；

WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。

虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。 IE6、IE7 等老旧浏览器不支持 CSS3 动画，

并且因为不支持一些属性或方法会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

一、wow

1.wow.js依赖于animate.css，首先要引入animate.css

2.引入wow.js

 <script>new WOW().init();</script>

3.元素的类里添加对应的类就可以了，wow类是必须有的

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>

属性说明：

slideInLeft说明了动画的样式，是从左边滑动出来的
data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

二、scrollreveal

1.引入scrollReveal.js

2.js:

3.<h1 class="h1" data-scroll-reveal="enter from the top over 1.5s">scrollReveal.js</h1>

参数描述

参数	类型	可用值	描述
origin	string	‘top’,’right’,’bottom’,’left’	动画的方向
distance	string	可用任何CSS单位值，如：’20px’,’10vw’,’5%’	动画的距离
duration	number	500	动画持续时间，单位毫秒
delay	number	0	动画的延迟时间，单位毫秒
rotate	object/number	{ x: 0, y: 0, z: 0 }	开始的角度，单位degrees
opacity	number	0	开始的透明度
scale	number	0.9	开始的缩放值
easing	string	‘ease’ ‘ease’ ‘ease-out’ ‘ease-in-out’ ‘ease-in-out’	动画的easing效果，可以是任何有效的CSS easing值
container	node	document.getElementById(‘foo’)	容器
mobile	boolean	true / false	是否在移动手机上显示动画效果
reset	boolean	true / false	元素是否在容器边界内来回滚动时都产生动画效果
useDelay	string	‘always’,’once’,’onload’	控制元素什么时候使用动画延迟
viewFactor	number	0.20	0.20表示元素在产生动画之前，它的20%在viewport或容器的边界之内
viewOffset	object/number	{ top: 48, bottom: 24 }	增加viewport或容器边界，单位像素
afterReveal	function	function( domEl ) {}	reveal动画之后触发的回调函数
afterReset	function	function( domEl ) {}	reset动画之后触发的回调函数

转载于:https://www.cnblogs.com/qdkfyym/p/11158138.html

wow和scrollreveal动画相关推荐

animate,wow,Bootstrap,scrollReveal
Animate 1.简介随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有:UI层面的有Bootstrap.Yui.JqueryUI.CSS3 ...
vue里面使用scrollReveal动画滚动的插件实现图片或者文章的动画
先来看看效果在网站上我们看到很多下拉加载页面的,渐渐的显示,其实用的就是一个插件想要实现这样的效果很简单一.安装 npm install --save vue-scroll-reveal 二.引 ...
js WOW.js滚动动画，跟随滚动条位置执行动画
原生js实现教程: 元素出现在页面时,添加动画,配合animate.css使用_hjhfreshman的博客-CSDN博客_给元素添加动画效果图: 如上所示,每滚动到一个区域,执行动画如:淡入,浮入 ...
页面加载时模块移入动画---wow
首先官网下载:https://github.com/matthieua/WOW animate.css wow.js 1,在头部引用animate.css <link rel="sty ...
vue页面滚动动画——wow.js教程
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. 缺陷:当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退.(即动画仅出现一次!) 官网地址 https://www.de ...
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
wow.js实现各种动画特效
下载地址 https://www.bootcdn.cn/wow/ 官方网站 https://www.delac.io/wow/ WOW.js用于设置用户滚动页面时触发各种CSS动画,WOW.js需和a ...
页面滚动加载动画之WoW.js
https://www.delac.io/wow/官网 https://github.com/matthieua/WOW 下载地址当网页的向下滚动的时候,有些元素会产生细小的动画效果.然而直接用an ...

wow和scrollreveal动画

参数描述

wow和scrollreveal动画相关推荐

最新文章

热门文章