经过前面的总结，用wow.js做了一个案例demo
里面的具体效果我已经标明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="css/animate.css">
<style type="text/css">
.row {
font-size: 0;
text-align: center;
}
.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;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="overflow-x: hidden">
<div style="width: 100%;margin: 150px auto;text-align: center">滚动屏幕动画效果</div>
<div>
<div class="row">
<!--<div class="wow rollIn bg-blue">从左到右滚动</div>-->
<div class="wow swing bg-purple" data-wow-iteration="2">左右摇摆</div>
<div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">放大缩小复原</div>
<div class="wow lightSpeedIn bg-purple">水滴变形滚动</div>
</div>
<div class="row">
<div class="wow bounce bg-green">上下弹性抖动</div>
<div class="wow shake bg-green">左右弹性抖动</div>
<div class="wow wobble bg-red">不倒翁左右晃</div>
</div>
<div class="row">
<div class="wow bounceInDown bg-green">从上往下掉落</div>
<div class="wow bounceInUp bg-blue">从下往上掉落</div>
<div class="wow bounceInLeft bg-purple">从左往右掉落</div>
<div class="wow bounceInRight bg-blue">从右往左掉落</div>
</div>
<div class="row">
<div class="wow slideInDown bg-green">从上往下发射</div>
<div class="wow slideInUp bg-blue">从下往上发射</div>
<div class="wow slideInLeft bg-purple">从左往右发射</div>
<div class="wow slideInRight bg-blue">从右往左发射</div>
</div>
<div class="row">
<div class="wow flipInX bg-blue">后仰前栽</div>
<div class="wow flipInY bg-blue">左右前栽</div>
</div>
<div class="row">
<div class="wow rollIn bg-red">从左到右滚动</div>
<div class="wow bounceInUp bg-yellow" data-wow-delay="0.5s">从下往上掉落</div>
<div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="1s">水滴变形滚动</div>
</div>
</div>
<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
<script>
// wow = new WOW({
// animateClass: 'animated',
// });
// wow.init();
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
</script>
</body>
</html>
扫描二维码关注公众号，回复：
212275 查看本文章
.