详解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 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python妙用之编码的转换详解
2017/04/21 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python 内置模块详解
2019/01/01 Python
在python中修改.properties文件的操作
2020/04/08 Python
Python进行特征提取的示例代码
2020/10/15 Python
介绍下Java的输入输出流
2014/01/22 面试题
毕业生的自我评价分享
2013/12/18 职场文书
品质主管岗位职责
2014/03/16 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
置业顾问岗位职责
2015/02/09 职场文书
人事聘任通知
2015/04/21 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
python实现简单石头剪刀布游戏
2021/10/24 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers