【来源】
页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意
刚知道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,首先需要下载animate.css和wow.min.js这两个文件。animate.css文件提供了各种各样的CSS动画效果,而wow.min.js是jQuery的插件,用于触发这些动画效果。 下载地址可以访问animate.css的官方网站**...
**WOW.js 知识点详解** WOW.js 是一个非常流行的JavaScript库,它使得网页上的元素能够在用户滚动页面时触发CSS3动画效果,从而创造出引人注目的用户体验。这款插件的设计理念是将视觉吸引力与用户交互紧密结合,...
【网页特效插件Wow.js详解】 在网页设计中,动态效果常常能提升用户体验,增加页面的吸引力。"Wow.js"正是一款专为实现此类滚动触发特效而设计的JavaScript插件。这款插件能够轻松地在网页滚动时激活CSS3动画,使...
`scrollReveal.js`是一款强大的JavaScript库,它使得网页元素随着用户滚动页面时能够产生动态的进入视口(viewport)的动画效果,类似于流行的`Wow.js`插件。这款插件的核心理念是增强用户体验,通过在网页滚动时...
JavaScript动画通常通过改变元素的样式属性来实现,例如使用`requestAnimationFrame`方法来平滑地更新屏幕。这种方式可以实现更精确的控制,如响应用户交互或同步多个动画。 4. **Wow.js 动画库** Wow.js是一个...
1. **动画插件**:如`animate.css`和`wow.js`,用于创建复杂的CSS动画和视差滚动效果。 2. **表单处理插件**:如`validate.js`,提供表单验证功能;`select2.js`,改进下拉选择框的用户体验。 3. **轮播图插件**:如...
### 基于Python的Post请求数据爬取的方法详解 #### 一、引言 在进行Web开发或数据抓取时,经常会遇到需要通过Post请求来获取数据的情况。本篇文章将详细介绍如何使用Python来实现Post请求的数据爬取,并提供具体的...
- **通过CSS选择器选择元素**:可以使用`find()`方法配合CSS选择器来定位特定元素。 ```python about = r.find('.about', first=True) # 查找第一个匹配的元素 print(about.text) # 打印元素的文本 print(about...