【来源】
页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意
刚知道wow.js这个插件,之前写的类似滚动时页面效果都是自己用jQuery写的,现在有了插件,开发更加快捷有效了
【演示及下载地址】http://www.dowebok.com/131.html
【案例解析】下篇文章我将通过具体案例解析wow.js用法,具体效果在文档里做了标明
【用法】
在做项目中,有时需要做到滚动条滑到某个位置时,才能显示动画,wow.js插件可以很好的解决问题
下面说明一下怎么使用这个插件:
1、wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css
<link rel="stylesheet" href="css/animate.css">
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类名
在需要动画的标签上添加.wow 和 你的动画元素即可
<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(动画执行次数)这四个属性可选可不选
注意:其中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 |
原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
【效果】
配合data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可以完成很多效果,主要还是多实践
【兼容】
IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断
.
分享到:
相关推荐
Wow.js是javascript动画插件,经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。 引入wow.js 在需要使用的元素上添加class=”wow” 使用js初始化
css动画效果 wow插件需要的wow.min.js和animate.css
WOW.js 改良版 之前版本只有下拉才会触发加载效果 支持上下滑动触发效果
wow.js使用和动画只执行一次问题优化
wow.min.js,wow.js
Wow.js是javascript动画插件,经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。 引入wow.js 在需要使用的元素上添加class=”wow” 使用js初始化
WOW.js(可视区域展示动画):http://blog.csdn.net/libin_1/article/details/52200659
WOW.js 改良版 之前版本只有下拉才会触发加载效果 支持上下滑动触发效果。
wow.js结合animated.css使用,页面添加动画,给网站增加活跃性
WOW.js是一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件。默认wow.js使用animate.css作为动画库,但是你可以通过设置来使用你喜欢的动画库。
Wow.js插件,可用于响应式页面的开发,需配合animate.css使用
<div class="wow bounceInDown bg-green">WOW.js <div class="wow lightSpeedIn bg-purple"> <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用 <div class="wow pulse bg-red" data-wow-...
近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址 使用方法真是超简单~~ 需要配合Animated.css...
wow.js是一个JavaScript库,用于制作网站上的滚动动画效果。它可以帮助您为网站添加动态和视觉吸引力,并使用户在滚动时感到更加舒适和流畅。 wow.js内置了许多不同类型的动画效果,例如淡入、弹跳、旋转、滑动等,...
由小码农整理分享 网址:https://www.code-elf.cn/ 有的页面在上下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。
wow.js 动态效果插件
本插件是基于JavaScript的web前端开发动画加载插件,结合animate.css共同使用,实现前端页面完美的动画效果
本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧