详解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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
理解javascript封装
Feb 23 Javascript
domReady的实现案例
Nov 23 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
了解重排与重绘
May 29 Javascript
js实现盒子滚动动画效果
Aug 09 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
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
java script编程起步(第三课)
2007/01/10 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
简单学习vue指令directive
2016/11/03 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
python如何获取服务器硬件信息
2017/05/11 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python编写简单端口扫描器
2019/09/04 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
员工入职担保书范文
2014/04/01 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
2015教师节通讯稿
2015/07/20 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
话题作文之自信作文
2019/11/15 职场文书