OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

WowJS:在滚动页面时添加动画效果的简单实现


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1435491054376
注意 转载须保留原文链接,译文链接,作者译者等信息。  
之前介绍过,通过Animate.css可以让CSS动画添加起来像喝水一样容易


不过这种动画效果却是没法控制的,通过 WOW.js ,可以在向下滚动的过程中逐渐释放这些动画效果。

默认情况下,当你向下滚动页面时,可以逐渐展示出 CSS 动画。它一般使用 animate.css 的动画效果。但是,您可以轻松设置成您喜欢的动画库。

优点


比其他 JavaScript 视觉插件更轻量级,像 Scrollorama (这个太重了,其实我们的需求都是非常简单的)

超简单的安装,与 animate.css 配合,只需几行代码即可。


简单使用


HTML

当滚动到这两个secion时,其会分别从左/右滚出。

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

JavaScript

new WOW().init();


高级应用


可以改变标志class,默认为 'wow',动画速度等

HTML

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

JavaScript

var wow = new WOW({
  boxClass:     'wow',      // animated element css class (default is wow)
  animateClass: 'animated', // animation css class (default is animated)
  offset:       0,          // distance to the element when triggering the animation (default is 0)
  mobile:       true,       // trigger animations on mobile devices (default is true)
  live:         true,       // act on asynchronously loaded content (default is true)
  callback:     function(box) {
    // the callback is fired every time an animation is started
    // the argument that is passed in is the DOM node being animated
  }
});
wow.init();

项目地址: https://github.com/matthieua/WOW
DEMO地址:http://mynameismatthieu.com/WOW/
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)
  2. 基于JavaScript的DDoS首次通过安全的浏览器发动攻击(百度被劫持攻击Github的原理和过程)
  3. 几款开源的图形化Redis客户端管理软件
  4. WordPress 4.3核心功能将放弃PHP并使用Node.JS重写[4.1]
  5. JavaScript中的哈希表(Hash Maps的最佳实践)
  6. JSON序列化(stringify)对象时排除某些属性的两种方法
  7. Mozilla Firefox将停止支持不安全的HTTPS
  8. LightGL轻量级的WebGL 3D渲染库
  9. JSGraphs目前最全的JavaScrtip开源图表库集合
  10. Waveform基于JavaScript的开源多声道音乐波形编辑器
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. [PPT]JavaScript初级教程
  2. JavaScript中的哈希表(Hash Maps的最佳实践)
  3. 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)
  4. JSON序列化(stringify)对象时排除某些属性的两种方法
  5. JavaScript变量作用域(Variable Scope)和闭包(closure)的基础知识
  6. 用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部按钮)
  7. 用纯css改变下拉列表select框的默认样式
  8. Atom编辑器嵌入Node.JS引擎实践
  9. AngularJS和$scope.$apply()用法的最佳实践
  10. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持

 关键字 - JavaScript
  1. JavaScript中NaN的秘密
  2. decodeURIComponent有个BUG,当浏览器请求地址含%+数字时,会解析错误
  3. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性
  4. JavaScript中splice与slice的区别、数组的复制以及在指定位置添加删除元素
  5. JavaScrip字符串模板表达式中的反引号怎么打?
  6. Node.JS更改Windows注册表regedit的几种方法
  7. AngularJS在大型单页面应用中的性能优化(二)
  8. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  9. Debian下设置Linux Shell脚本开机自动启动Node.JS进程
  10. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号