详解wow.js中各种特效对应的类名


Posted in Javascript onSeptember 13, 2017

一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。)

刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。

虽然效果出来了,但是网上并没有整理好的各种特效对应的类名,所以写一篇通俗易懂(最起码自己能看懂)的文章供大家参考学习。(^_^)

二、首先说明一下怎么使用这个插件:

1、wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css。

<link rel="stylesheet" type="text/css" href="css/animate.min.css" rel="external nofollow" >

2、在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。(无需引用jQuery)

<script type="text/javascript" src="js/wow.min.js"></script>

<script type="text/javascript">

 new WOW().init();

</script>

注意new WOW().init();中的WOW要大写,否则就没效果了。

3、在css下方js上方写需要动画的元素(必须设置为块状或者行内块状!必须设置为块状或者行内块状!必须设置为块状或者行内块状!),并添加class类名。

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

类名前面的wow是每一个带动画的元素都要加的,slideInLeft就是说明动画样式。后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选。

4、为了写文章专门测试了一下data-wow-offset和data-wow-iteration这两个属性,其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置,而不是距离浏览器窗口底部的位置。

三、步入正题,下面依次测试各种class类名的动画效果。(力求通俗易懂)

wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值
   
wow bounceIn 从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值
wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
   
wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度)
wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右)
wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变
   
wow lightSpeedIn 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值
wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳)
wow flipInX 原位置后仰前栽、透明度从100%变化至设定值
wow flipInY 原位置左右旋动、透明度从100%变化至设定值
wow bounce 上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
wow shake 左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
wow swing 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变
wow bounceInU 原位置不变、直接从不显示到显示(无过过渡效果)
wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

测试了这么多终于摸到窍门了,打开引用的animate.css或者animate.min.css,里面@keyframes定义了各种动画,将wow后面的类名替换一下测试效果就可以了。

****************************************************************

https://daneden.github.io/animate.css/ 也可以在这个地方看各种演示

****************************************************************

四、配合data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可以完成很多效果,主要还是多实践。

五、IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。

六、本文主要描述各种类名对应的动画效果,其他关于wow.js不作过多描述(想描述我也不懂啊 = =)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 #Javascript
JS库之Waypoints的用法详解
Sep 13 #Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 #Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 #Javascript
基于vue的短信验证码倒计时demo
Sep 13 #Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
You might like
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
如何对python的字典进行排序
2020/06/19 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
十八大宣传标语
2014/10/09 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
python中redis包操作数据库的教程
2022/04/19 Python