WOW.js+animate 帮助你实现滚动页面动画效果
来源:互联网 发布:见过最漂亮的女生知乎 编辑:程序博客网 时间:2024/05/21 03:26
Animate.css是一个有趣的,跨浏览器的css3动画库。网址:https://daneden.github.io/animate.css/
WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
为了方便大家,我打包了这个插件代码,大家可以直接下载调用:https://pan.baidu.com/s/1i53KqcX
先说Animate.css用法:
1、首先引入animate css文件
<head> <link rel="stylesheet" href="animate.min.css"></head>2、给指定的元素加你想要的动画名,可以在官网上先了解动画名对应的效果
<div class="animated bounceInLeft"></div>
3、通过jQ来添加动画名
$('#myt').addClass('animated bounceInLeft');4、有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
$(function(){ $('#my').addClass('animated bounce'); setTimeout(function(){ $('#my').removeClass('bounce'); }, 1000);});5、animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:
#my{ animate-duration: 2s; //动画持续时间 animate-delay: 1s; //动画延迟时间 animate-iteration-count: 2; //动画执行次数}WOW.js的使用方法
1)HTML
<div class="wow animated bounceInLeft"></div>2)JavaScript
new WOW().init();如果需要自定义配置,可如下使用:
var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true});wow.init();
配置
属性/方法类型默认值说明boxClass字符串‘wow’‘wow’需要执行动画的元素的 classanimateClass字符串‘animated’‘animated’animation.css 动画的 classoffset整数0距离可视区域多少开始执行动画mobile布尔值true是否在移动设备上执行动画live布尔值true异步加载的内容是否有效data-wow-delay="0.1s" 动画执行的延迟时间
data-wow-iteration="2" 动画执行的次数
data-wow-duration="0.1s" 动画持续的时间
data-wow-offset="10" 距离可视区域多少开始动画
0 0
- WOW.js+animate 帮助你实现滚动页面动画效果
- WOW.js+animate.css让页面滚动时显示动画,使页面更有趣
- 用wow.js实现滚动页面时触发CSS 动画效果的插件
- 你也可以做一个小米魅族网站(WOW.js:WOW.js – 在页面滚动时展现动感的元素动画效果)
- WOW.js – 在页面滚动时展现动感的元素动画效果(精)
- 【jQuery插件】-----页面滚动时动画wow.js
- 用js实现类似jquery里的animate动画效果
- 原生js实现jquery函数animate()动画效果
- jquery animate实现动画效果
- wow.js 向下滚动动画插件 使用说明
- jquery的动画效果animate附加一个滚动回到页面的例子
- 原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
- velocity.js实现页面滚动切换效果
- jquery的animate动画效果函数用JS代码是如何实现的
- [js]实现自定义animate动画库
- 点击页面上某个元素实现动画的滚动效果
- Scrollanim---鼠标向下滚动加载动画,与wow.js类似
- jQuery animate 动画效果
- 阿里云短信服务_发送手机验证码java
- JRE和JDK的区别
- 第八章 React组件的生命周期
- HDU5242:Game(树上贪心)
- Mac 终端使用VPN (已解决)
- WOW.js+animate 帮助你实现滚动页面动画效果
- Qt学习整理
- wireshark学习笔记(一)
- 重载函数为什么只在C++下
- spring IOC 注入方式 2--带有标签的注入 自动扫描
- android Vibrator实现手机震动功能
- JNI 原理进阶
- 【Caffe】Blobs数据结构的Python表示
- JAVA调用DLL