WOW.js（可视区域展示动画）

共8个文件

html：3个

js：2个

css：2个

需积分: 45 76 浏览量 2016-08-13 17:49:40 上传评论收藏 20KB ZIP 举报

**WOW.js** 是一款基于 **JavaScript** 的库，专门用于在网页中实现视差滚动效果，即元素在进入浏览器可视区域时触发动画效果。这种技术可以为网站增添动态交互感，提高用户体验，尤其适用于展示内容或者吸引用户注意力。WOW.js 主要与 **Animate.css** 配合使用，Animate.css 提供了丰富的动画效果，而 WOW.js 负责在正确的时间点启动这些动画。 ### 1. 安装与引入你需要从官方仓库或者CDN获取 `wow.min.js` 和 `animate.css` 文件。在 HTML 文件中通过 `<script>` 和 `<link>` 标签引入它们，确保 `wow.min.js` 放在所有依赖它的脚本之后，例如 jQuery 或其他 JavaScript 库。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="animate.css"> </head> <body>  <script src="wow.min.js"></script> <script>new WOW().init();</script> </body> </html> ``` ### 2. 初始化与配置在页面加载完成后，通过 `new WOW().init()` 初始化 WOW.js。如果你需要自定义配置，如动画延迟、动画方向等，可以传递一个对象作为参数： ```javascript new WOW({ offset: 100, // 当元素距离顶部达到此值时开始动画 mobile: false, // 是否在移动设备上启用 live: true, // 是否实时监控新元素 boxClass: 'wow', // 默认的动画元素类 animateClass: 'animated', // 动画类前缀 placeClass: 'wow-place', // 用于放置动画元素的类 callback: function(box) { /* do something */ } // 动画开始时的回调函数 }).init(); ``` ### 3. 添加动画元素在 HTML 中，为希望添加动画效果的元素添加特定的类。默认情况下，你需要同时包含 `wow` 和 `animateClass`（如 `animated fadeIn`）： ```html <div class="wow fadeIn">This element will fade in when it enters the viewport.</div> ``` ### 4. 示例文件结构压缩包中的文件列表可能代表了一个简单的项目结构： - `index-1.html`: 主要的 HTML 页面，包含初始化 WOW.js 的代码和动画元素。 - `css`: 存放 `animate.css` 文件的目录，提供动画效果样式。 - `.project`: 可能是项目配置或设置文件，不直接与 WOW.js 相关。 - `index-2.html`: 另一个 HTML 页面，可能包含更多的动画元素或不同的布局。 - `img`: 图像资源目录，可能会被动画元素引用。 - `js`: 存放 `wow.min.js` 文件的目录。 - `idnex-3.html`: 第三个 HTML 页面，同样可以使用 WOW.js 的动画效果。 ### 5. 动画效果与兼容性 WOW.js 兼容大多数现代浏览器，包括 Chrome、Firefox、Safari、Edge 和 IE9+。它利用浏览器的 `getBoundingClientRect()` 方法来检测元素是否在视口内，所以性能相对较好。然而，由于依赖于 CSS3 动画，一些较旧或非主流的浏览器可能无法支持所有的动画效果。 WOW.js 为网页开发者提供了一种简单且直观的方式来创建视差滚动动画，使得网页设计更加生动有趣。合理地使用它可以增强用户在浏览网站时的沉浸感，提升整体的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

WOW.js（可视区域展示动画）.zip （8个子文件）

index-1.html 5KB

css

animate.min.css 52KB

animate.css 71KB

.project 1KB

index-2.html 9KB

img

wow.js 13KB

wow.min.js 7KB

idnex-3.html 7KB

<!DOCTYPE html> <html> <head> <title>Reveal Animations When Scrolling — WOW.js</title> <meta name="description" content="WOW.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend."> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8">   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" type="image/x-icon">  <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/style.css"> <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css"> <link rel="author" href="https://plus.google.com/u/0/105983066516923168596/posts" /> <link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css"> <style type="text/css"> .top-banner { background-color: #666; } </style> </head> <body> <div class="content"> <div class="container-gray"> <div class="container"> <div class="row small center wow fadeInDown top__element" data-wow-delay="0.5s"> <div class="span2 offset4"> <a href="http://www.materialup.com/" target="_blank" title="Daily Material Design Inspiration - MaterialUp">Live Demo</a> </div> <div class="span2"> <a href="docs.html">How to use? </a> </div> <div class="span2"> <a target="_blank" href="https://github.com/matthieua/WOW">Github</a> </div> <div class="span2"> <a target="_blank" href="https://twitter.com/mattaussaguel" title="Matt Aussaguel">@mattaussaguel </a> </div> </div> </div> </div> <div class="container-white"> <div class="container"> <div class="row"> <div class="span12 center"><img src="http://mynameismatthieu.com/WOW/img/wow-logo.jpg" height="177" data-wow-iteration="3" data-wow-duration="0.15s" class="wow pulse"> <h2 data-wow-duration="0.5s" class="wow bounceInDown"> Reveal Animations When You Scroll. Very <a target="_blank" href="http://daneden.github.io/animate.css/" title="Animate.css">Animate.css </a>Friend :-) <br> Easily customize animation settings: style, delay, length, offset, iterations... </h2> </div> </div> </div> </div> <div class="container-white"> <div class="container circles"> <div class="row"> <div data-wow-delay="0.5s" class="span3 wow rollIn"> <p class="circle bg-green">such easy</p> </div> <div data-wow-delay="0.5s" class="span3 wow bounceInDown center"><img src="http://mynameismatthieu.com/WOW/img/wow-1.gif" height="200" class="wow"></div> <div data-wow-delay="0.5s" class="span3 wow lightSpeedIn"> <p class="circle bg-yellow">very JS </p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-3.gif" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow pulse"> <p class="circle bg-blue">WOW </p> </div> <div class="span3 wow bounceInRight center"><img src="http://mynameismatthieu.com/WOW/img/wow-12.gif" height="200"></div> </div> <div class="row"> <div class="span3 wow bounceInLeft"> <p class="circle bg-red">no jquery</p> </div> <div class="span3 wow flipInX center"><img src="http://mynameismatthieu.com/WOW/img/wow-2.gif" height="200"></div> <div class="span3 wow bounceInRight"> <p class="circle bg-purple">many anims </p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-5.gif" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow shake"> <p class="circle bg-yellow">aint joke</p> </div> <div data-wow-iteration="2" class="span3 wow swing center"> <img src="http://mynameismatthieu.com/WOW/img/wow-6.gif" height="200"></div> </div> <div class="row"> <div class="span3 wow rollIn"> <p class="circle bg-purple">how small</p> </div> <div data-wow-delay="0.5s" class="span3 wow bounceInUp center"><img src="http://mynameismatthieu.com/WOW/img/wow-10.gif" height="200"></div> <div data-wow-delay="0.5s" data-wow-duration="0.15s" class="span3 wow lightSpeedIn"> <p class="circle bg-green">3 kb only </p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-7.gif" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.25s" class="span3 wow pulse"> <p class="circle bg-blue">just scroll</p> </div> <div class="span3 wow lightSpeedIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-9.gif" height="200"></div> </div> <div class="row"> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow bounce"> <p class="circle bg-yellow">reveal now</p> </div> <div class="span3 wow bounceInUp center"><img src="http://mynameismatthieu.com/WOW/img/wow-8.gif" height="200"></div> <div class="span3 wow bounceInRight"> <p class="circle bg-red">so impress</p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-4.gif" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow flip"> <p class="circle bg-green">WOW</p> </div> <div class="span3 wow bounceInRight center"><img src="http://mynameismatthieu.com/WOW/img/wow-11.gif" height="200"></div> </div> <div class="row"> <div data-wow-delay="0.5s" class="span3 wow rollIn"> <p class="circle bg-red">no jquery?!</p> </div> <div data-wow-delay="1s" class="span3 wow bounceInDown center"><img src="http://mynameismatthieu.com/WOW/img/grumpy.gif" height="200"></div> <div data-wow-delay="1.5s" class="span3 wow bounceInRight"> <p class="circle bg-purple">that sucks! </p> </div> </div> </div> </div> <div class="container-white"> <div class="container"> <div class="row"> <div class="span12 center"> <h2>Made and used by <a href="http://www.materialup.com/" target="_blank">materialup.com</a>:</h2> <p> <div class="wow zoomIn" data-wow-duration="1s" data-wow-offset="100"> <div class="wow tada" data-wow-delay="1s" data-wow-duration="1s"> <div class="wow rubberBand" data-wow-delay="2000ms" data-wow-duration="1s"> <div class="wow pulse" data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-duration="2s"> <a href="http://www.materialup.com/" title="Daily Material Design Inspiration - MaterialUp" target="_blank"> <img src="http://mynameismatthieu.com/WOW/img/materialup-logo-circle.png" alt="MaterialUp" class="center"> </a> </div> </div> </div> </p> </div> <div class="span12 center"> <h2>See WOW.js revealing animations on these websites:</h2> <p> <a target="_blank" href="http://www.materialup.com" title="MaterialUp - Material Design Gallery">* MaterialUp *</a> <br> <a target="_blank" href="https://www.fliplingo.com/" title="Fliplingo - Automated translation on Twitter">* Fliplingo *</a> <br> <a href="http://www.microsoft.com/en-us/news/stories/garage/" title="Microsoft Stories" target="_blank">* Microsoft Stories *</a> <br> <a href="http://www.streamlineicons.com/" title="Streamline Icons" target="_blank">* Streamline Icons *</a> <br> <a href="http://popcorn-time.se

评论收藏

内容反馈