&!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网站的观点或立场
访问：8604次
排名：千里之外
原创：17篇
(6)(1)(11)Scrollanim---鼠标向下滚动加载动画，与wow.js类似
转载地址：/217.html 加qq群下载代码：简介Scrollanim 是使用 CSS3 + JavaScript 实现的用于创建滚动动画的库，应用到元素上后，当此元素出现在浏览器可视区域时便会执行对应的动画，和之前介绍的 WOW.js及 scrollReveal.js类似。Scrollanim 是Kissui的一部分，所以使用 Scrollanim 时需要用到 kissui.css。使用方法1、引入文件&link rel="stylesheet" href="css/kissui.css"&&link rel="stylesheet" href="css/scrollanim.min.css"&&script src="js/scrollanim.min.js"&&/script&2、HTML&div data-kui-anim="fadeIn"&
&p&欢迎来到 &/p&&/div&在元素上加上 data-kui-anim 属性，并写上相应的动画名称，即可现实动画效果。Scrollanim 使用 Animate.css 为内置的动画库，你可以使用 Animate.css 里的任何一种动画。3、JavaScriptScrollanim 也可以使用 JavaScript 控制：kissuiScrollAnim.add(document.getElementById('dowebok'), {
'in': 'bounceIn'});
最新教程周点击榜
微信扫一扫作者：路人甲链接：/p/来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
昨天写的文章，一大早发出去点开预览的时候发现格式都错乱了。又急着去上班就把文章给删除了。本来是周一更的习惯也就打破，放到周二去更新了。今天周二，度过了烦人的周一，又开始一个新的工作日。
这篇文章起初是想做：有哪些适合新手练手的前端项目？但是我发现我一个人没法整理，于是正在邀请几位大大朋友在帮忙。所以这个主题暂时空缺一周或是两周，在下周或是下下周的时候可能会补上来。也欢迎各位朋友在学习过程中碰到不错的练习项目可以积极的推荐。
学习编程专栏连载的练手项目篇，如有兴趣可以访问前三篇：
本篇文章推荐分享五篇关于前端资源汇总的帖子，希望可以帮助到学习前端的你。同时你可以去看一看前端技能树喔：
第一篇： ，以及他们的github地址：
以下是目录，更多信息请访问他们的主页：
预编译：、、、、、
查找工具：
版本控制：
在线编辑：
调试/测试：
部署流程：
高效工具：
博客/社区/资讯
国内综合：
国外综合：
前端资讯：
问答社区：
前端大牛：
滑动/视差：
动画/效果：
模板工具：
JavaScript：
快速入门：
精选文章：
手册/规范：
翻译文章：
灵感来源：
学点设计：
交互体验：
配色工具：
以及他们的github地址，欢迎关注：
一小部分目录
一个巨大的前端开发资源清单。star:15000
分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860
史上最全前端开发面试问题及答案
包含Animation，UI，dialog，Carousels，color，image，workflow等。star:100
一系列很棒的javascript 库，资源。star:3100
前端技能汇总，包含前端知识架构，后端知识，linux，书籍推荐等。star:4000
node.js中文资料导航。star:1200
移动端web开发收藏夹。star:200
Gulp 入门指南
最全的资源教程-前端涉及的所有知识体系。（12.25更新）
canvas/数据可视化
基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。star:6900
使用&canvas&标签的简易HTML5图表。star:14600
跨平台JavaScript创意编码框架，gzip压缩后仅有2kb。star:1500
一个基于数据操作文档的js数据可视化框架，最流行的可视化库之一。star:38000
一个轻量级的Canvas类库，MVC封装，数据驱动，提供类DOM事件模型，让canvas绘图大不同！star:850
一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:4.5K（6.28更新）
将图片转为纯css代码。（11.3更新）
第三篇：网站：（更新网址），github地址：
（github地址），号称最全的资源教程－前端涉及的所有知识体系。
部分目录（此处所有目录链接到主页），详细信息请访问具体网址和github
第四篇： 网站 ，此篇没有找到github地址，作者整理了自己在Github中的starred项目可以直接在此网站进行访问。
部分目录：
..............
第五篇：maybe你得英语水平比较高，你可以看这里：。同样，他的github地址：
阅读(...) 评论()
我的收藏夹匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。