wow.min.js 支持css3多种动画的效果!
2018-04-02 16:50
344 查看
下载地址:http://www.bootcdn.cn/wow/今天发现一个非常有趣的js,wow.min.js,Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的,用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小,类似 Scrollorama(这个非常华丽,但是也更繁杂)。wow.min.js 非常容易安装和使用。如果你使用 Wow.js,你可以非常快的启动,执行代码。WOW.js 需要 animate.css 配合,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。 实例如下 点击查看>>使用方法:1、加入animate.css
增加顺序动画在标签上增加
打开引用的animate.css或者animate.min.css,里面@keyframes定义了各种动画,将wow后面的类名替换一下测试效果就可以了。配合data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可以完成很多效果,主要还是多实践。IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
<
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>注意new WOW().init();中的WOW要大写,否则就没效果了。3、元素中加入class
<
div
class
=
"wow animated tada"
>tada</
div
>66种CSS3animation动画效果,← 点击查看选择想要的效果,并加入animate.css的class,如:tada,animate效果在下面链接查看4、可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如.(在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="数值"中的数值是动画完成后元素距离显示器底部的位置,而不是距离浏览器窗口底部的位置。5、wow.js 使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
<script src=
"http://www.bbsxiaomi.com/js/wow.min.js"
></script>6、也可以自定义wow.js
<script src=
"http://www.bbsxiaomi.com/js/wow.min.js"
></script>
属性/方法 | 类型 | 默认值 | 说明 |
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
data-wow-delay=
"0.3s"如:
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 | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
<script src=
"http://www.bbsxiaomi.com/js/wow.min.js"
></script>
相关文章推荐
- wow.js 支持css3多种动画的效果
- 用wow.js实现滚动页面时触发CSS 动画效果的插件
- [置顶] 你也可以做一个小米魅族网站(WOW.js:WOW.js – 在页面滚动时展现动感的元素动画效果)
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
- 纯CSS3实现多种不同的等待效果(无js/jquery/无图片)
- css3--js-jq动画效果
- 多种CSS3动画效果星级评分特效
- WOW.js – 在页面滚动时展现动感的元素动画效果
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- CSS3动画效果——js调用css动画属性并回调处理详解
- CSS3鼠标悬停图片动画 多种文字动画效果
- CCS3动画效果插件——Animae.css和WOW.js
- WOW.js – 在页面滚动时展现动感的元素动画效果(精)
- 实用CSS3的transform实现多种动画效果
- 拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
- jquery使用CSS3实现文字动画效果插件Textillate.js
- WOW.js+animate 帮助你实现滚动页面动画效果
- 拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)