wow.min.js使用方法汇总
Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的,用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。
WOW.js 需要 animate.css 配合,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。
使用方法:
1、加入animate.css
<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">
2、加入wow.js 。(无需引用jQuery)
<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
3、元素中加入class
<div class="wow animated tada">tada</div>
4、可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如.(在css下方js上方写需要动画的元素(必须设置为块状或者行内块状!必须设置为块状或者行内块状!必须设置为块状或者行内块状!),并添加class类名。)
<div class="wow animated 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(动画执行次数)这四个属性可选可不选。
初始化wow.min.js
<script>wow = new WOW({animateClass: 'animated',});wow.init();</script>
如果需要自定义配置,可如下使用:
var wow = new WOW({boxClass: ‘wow‘,animateClass: ‘animated‘,offset: 0,mobile: true,live: true
});
wow.init();
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
注意new WOW().init();中的WOW要大写,否则就没效果了。
1、在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(动画执行次数)这四个属性可选可不选。
<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration:"1"></div>
data-wow-duration:更改动画持续时间
data-wow-delay:动画开始前的延迟
data-wow-offset:开始动画的距离(与浏览器底部相关)
data-wow-iteration:动画的次数重复(无限次:infinite)
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 | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
2、其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置,而不是距离浏览器窗口底部的位置。
有的网站采用全屏滚动的fullpage插件与wow相结合的方法,实现的效果比较酷炫。我们完全可以仿写。
但是使用fullpage.js下wow.js无效失效没动作
问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下
$(‘#fullpage‘).fullpage({
scrollBar:true;
});
最后利用css将滚动条隐藏,将html添加overflowhidden,代码如下
html{
overflow:hidden;
}
wow.min.js使用方法汇总相关推荐
- wow.min.js 支持css3多种动画的效果!
下载地址:http://www.bootcdn.cn/wow/ 今天发现一个非常有趣的js,wow.min.js,Wow.js 允许用户滚动页面的时候展示 CSS 动画.默认的,用户可以使用它来出发 ...
- JS数组方法汇总 array数组元素的添加和删除
2019独角兽企业重金招聘Python工程师标准>>> unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回u ...
- wow.js 使用方法
使用方法: 1.wow.js依赖于animate.css,首先需要在 head内引入animate.css或者animate.min.css. <link rel="styleshee ...
- js如何操作表格(常用属性方法汇总)
js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
- js解决异步的方法汇总
js解决异步的方法汇总 参考文章: (1)js解决异步的方法汇总 (2)https://www.cnblogs.com/yunshangwuyou/p/9631914.html 备忘一下.
- 绕开JS验证的方法汇总
1.应用场景 用于请求接口测试.[比如后端接口安全测试] 2.学习/操作 前言: 服务器端验证是必要的. 方法汇总 方法一 将页面保存到自己机器上, 然后把脚本检查的地方去掉,最后在自己机器上运行那个 ...
- Vue导入TradingView(无charting_library.min.js文件的包导入方法)
Vue导入TradingView(无charting_library.min.js文件的包导入方法) 你申请到的包很可能不是有charting_library.min.js文件的那个版本,而是char ...
- 用js代码判断质数_JavaScript判断数字是否为质数的方法汇总
前言 今天看到一个题目,让判断一个数字是否为质数.看上去好像不难.因此,我决定实现一下. DOM结构 计算500以内的质数并输出 $(function(){ $("#submit" ...
- web3.js使用bug汇总及解决方法
web3.js使用过程中各类bug汇总:More than one instance of bitcore-lib found;BigNumber Error;gasLimit无法解析而报错;js合约 ...
最新文章
- 根据输入的日期计算你活了多少天(新手)
- bootstrap的php写在哪里,bootstrap用什么编辑器写
- python response.json()报错_python:解析requests返回的response(json格式)说明
- centos09-nodejs与vue搭建
- 6-7Pytorch搭建cifar10训练脚本(上)
- STUN和TURN协议解析
- MyBatis学习笔记(3)-动态SQL
- Nexus下载网盘地址,免费哦,烦要币的
- 优化算法|布谷鸟算法原理及实现
- 【DBA | IT人生】数据库解惑系列
- gcj-02 wgs-84 java_GCJ-02火星坐标系和WGS-84坐标系转换关系
- java实现学生信息管理系统
- 计算机新建怎么没有表格,为什么新建找不到excle:为什么电脑新建项目里没有EXCEL表格?...
- llqrcode.js识别二维码,解析二维码信息
- Android studio百度地图SDK开发 2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划
- [网络工程师]-防火墙-入侵防护系统IPS
- Android集成友盟推送功能
- 全球与中国四甲基氢氧化铵市场深度研究分析报告
- 非常好的免费在线计算机词典
- [Unity] 关于Unity Mirror的一点体会