详解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 相关文章推荐
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
js 代码优化点滴记录
Feb 19 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
js实现GIF图片的分解和合成
Oct 24 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP文件大小格式化函数合集
2014/03/10 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
Javascript 继承实现例子
2009/08/12 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
python批量生成本地ip地址的方法
2015/03/23 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
学习Python爬虫的几点建议
2020/08/05 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
不假外出检讨书
2014/01/27 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
电影雨中的树观后感
2015/06/15 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python