经过前面的总结，用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>
.
相关推荐
WOW.js 是一款流行的JavaScript库，由Matteo Spinelli开发，主要用于实现网页上的滚动动画效果。原版的WOW.js主要关注于当用户向下滚动页面时，元素进入视口（viewport）时触发动画。然而，这个改良版的WOW.js引入了...
首先，"wow.min.js" 是一个JavaScript库，它主要用于检测用户的滚动行为，当用户滚动到特定元素时，可以触发预先设定的CSS3动画。这个库由Matthieu Aussaguel创建，它的主要功能是与"animate.css"配合，使得网页元素...
**描述：**WOW.js 是一个流行的JavaScript库，主要用于在网页上实现视差滚动效果，即当用户滚动页面时，元素会以动画方式进入视图。原版的WOW.js通常在元素从上方滚动到视口时才触发加载效果。然而，这个改良版的WOW...
**WOW.js** 是一款基于 **JavaScript** 的库，专门用于在网页中实现视差滚动效果，即元素在进入浏览器可视区域时触发动画效果。这种技术可以为网站增添动态交互感，提高用户体验，尤其适用于展示内容或者吸引用户...
Wow.js是javascript动画插件，经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。 引入wow.js 在需要使用的元素上添加class=”wow” 使用js初始化
wow.js使用和动画只执行一次问题优化
wow.min.js，wow.js
你可以通过npm（Node Package Manager）或者直接下载JavaScript文件来获取Wow.js。在项目中引入后，需要初始化Wow.js实例，指定动画效果的方向，例如向上、向下、向左或向右。此外，可以设置延迟时间、动画速度等...
"WOW.js"就是这样一款JavaScript库，它与"animated.css"配合使用，可以在用户滚动页面时巧妙地展示元素的动画效果，为网页增添活力。本文将深入探讨WOW.js和animated.css的工作原理、安装步骤以及如何在项目中应用...
哇哦（Wow.js）是一种JavaScript库，专门用于创建在页面滚动时触发的动画效果。它与Animate.css结合使用，能够为网页元素添加丰富的动态显示，从而提升用户体验，尤其是在内容较多需要滚动浏览的页面上。 首先，Wow...
Wow.js是javascript动画插件，经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。 引入wow.js 在需要使用的元素上添加class=”wow” 使用js初始化
WOW.js是一款强大的JavaScript插件，它专门用于在网页滚动时触发CSS3动画效果，为用户体验带来丰富的视觉惊喜。这个插件的核心理念是将动态效果与页面的滚动事件相结合，使得网页元素在用户视线达到时才开始展现其...
**Wow.js** 是一个JavaScript库，由Matteo Spinelli开发，主要用于检测用户的滚动行为并触发CSS动画。它的主要功能是当元素进入浏览器的视口时，自动启动预定义的CSS动画。Wow.js简化了将动画添加到页面上的过程，...
WOW.js是一款功能强大的JavaScript插件，它专为网页设计者和开发者提供了在页面滚动时触发CSS3动画的解决方案。这个插件的核心理念是，当用户浏览网页时，元素随着滚动条的移动而逐渐展现出来，为用户提供一种动态且...
<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是一个JavaScript库，它与Animate.css配合使用，能够在网页上创建滚动视差效果。当用户滚动页面时，WOW.js会检测元素进入浏览器视口的时机，并触发预先定义的动画。这个库使得开发者无需复杂的JavaScript知识...
wow.js是一个JavaScript库，用于制作网站上的滚动动画效果。它可以帮助您为网站添加动态和视觉吸引力，并使用户在滚动时感到更加舒适和流畅。 wow.js内置了许多不同类型的动画效果，例如淡入、弹跳、旋转、滑动等，...
wow.js 动态效果插件