&!DOCTYPE html&
lang="zh-CN"&
charset="utf-8"&
&WOW.js演示_dowebok&
rel="stylesheet" href="/98/css/animate.min.css"&
* { margin: 0; padding: 0;}
{ overflow-x: hidden; font-family: "Microsoft Yahei";}
{ width: 100%; margin: 80px 0; font-size: 50px; font-weight: 500; text-align: center;}
.txt { margin: 80px 0; font-size: 16px; text-align: center;}
.dowebok { margin: 0 auto;}
{ list-style-type: none;}
.dowebok .row { font-size: 0; text-align: center;}
.dowebok .wow { display: inline-block; width: 280px; height: 280px; margin: 30px 15px 0; border-radius: 50%; font: 30px/280px "Microsoft Yahei"; vertical-align: top; *display: inline; zoom: 1;}
.bg-green { background: #5bd5a0;}
.bg-blue { background: #1daee9;}
.bg-purple { background: #c843a5;}
.bg-red { background: #eb3980;}
.bg-yellow { background: #ffcc35;}
&WOW.js - 让页面滚动更有趣&
class="txt"&WOW.js 能让页面滚动时显示动画，使页面更有趣。&
class="dowebok"&
class="row"&
class="wow rollIn bg-blue"&&
class="wow bounceInDown bg-green"&WOW.js&
class="wow lightSpeedIn bg-purple"&&
class="row"&
class="wow rollIn bg-yellow" data-wow-delay="0.5s"&简单易用&
class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"&&
class="wow bounceInRight bg-blue"&轻量级&
class="row"&
class="wow bounceInLeft bg-green"&&
class="wow flipInX bg-purple"&WOW.js&
class="wow bounceInRight bg-yellow"&&
class="row"&
class="wow rollIn bg-blue"&无需 jQuery&
class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"&&
class="wow swing bg-purple" data-wow-iteration="2"&纯 JS&
class="row"&
class="wow rollIn bg-red"&&
class="wow bounceInU bg-yellow" data-wow-delay="0.5s"&WOW.js&
class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"&&
class="row"&
class="wow bounceInLeft bg-purple"&依赖 animate.css&
class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"&&
class="wow lightSpeedIn bg-yellow"&多种动画&
class="row"&
class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"&&
class="wow bounceInUp bg-red"&WOW.js&
class="wow bounceInRight bg-purple"&&
class="row"&
class="wow rollIn bg-red" data-wow-delay="0.5s"&无需 jQuery！？&
class="wow bounceInDown bg-green" data-wow-delay="1s"&&
class="wow bounceInRight bg-yellow" data-wow-delay="1.5s"&谢谢&
src="/131/js/wow.min.js"&&
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
浏览器兼容
IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
1、引入文件
rel="stylesheet" href="css/animate.min.css"&
&div class="wow slideInLeft"&&/div&
&div class="wow slideInRight"&&/div&
可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：
&div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"&&/div&
&div class="wow slideInRight" data-wow-offset="10"
data-wow-iteration="10"&&/div&
3、JavaScript
new WOW().init();
如果需要自定义配置，可如下使用：
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
wow.init();
需要执行动画的元素的 class
animateClass
‘animated’
animation.css 动画的 class
距离可视区域多少开始执行动画
是否在移动设备上执行动画
异步加载的内容是否有效
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12590次
排名：千里之外
原创：17篇
(6)(1)(11)滚动视差含义及相关js插件介绍 - 推酷
滚动视差含义及相关js插件介绍
什么是滚动视差？
视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παρ?λλαξι? (parallaxis)，意思是”改变”。
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。
说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。
收集的一些js插件：
1、ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。
2、Headroom.js – 快速响应用户的页面滚动操作
摘要: Headroom.js 是一个轻量级，高性能的JS插件（无依赖性！），允许你响应用户的滚动行为。Headroom.js 使您能够在适当的时候把元素融入视图，而其它时候让内容成为焦点。Headroom.js 简单易用，它有一个纯 JS API，以及可选的 jQuery、Zepto 和 AngularJS 兼容的插件。
3、Parallax.js – 自适应智能设备方向的视差效果插件
Parallax.js 是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。有很多的行为，你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和 JavaScript API 调用。
4、Owl Carousel – 支持触摸的 jQuery 响应式传送带插件
Owl Carousel 是一个 jQuery 插件，使我们能够迅速地创建响应式传送带滑块。这个插件是触摸友好的，能与几乎任何的 HTML 内容兼容使用。另外，强大的选项设置支持分页/滑动速度，启用/禁用自动播放，显示子弹导航等等。
5、jQuery localscroll (文章之间顺差滚动插件)
6、jQuery scrollTo (最主要的平滑滚动)
7、jQuery Inview (判断一篇文章是否在浏览)
8、jScrollPane 跨浏览器设置样式的滚动条与jQuery和CSS
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致这篇文章被以下标签收录
问说网 / 蜀ICP备号
感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！