– 让页面滚动更有趣">

演示1
演示2-仿oppo首页 下载

简介

有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6
的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60
多种的动画效果,能满足您的各种需求。

浏览器兼容

IE10+ – 让页面滚动更有趣"> Chrome – 让页面滚动更有趣"> Firefox – 让页面滚动更有趣"> Opera – 让页面滚动更有趣"> Safari – 让页面滚动更有趣">

IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll
方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。

使用方法

1、引入文件


2、HTML



可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:


3、JavaScript

new WOW().init();

如果需要自定义配置,可如下使用:

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置

属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效

演示1
演示2-仿oppo首页 下载

标签:animate.css滚动

http://www.dowebok.com/131.html

最新文章

  1. 【NoSql】Redis
  2. gitlab两种连接方式:ssh和http配置介绍
  3. 【LintCode】删除链表中的元素
  4. Jmeter分布式测试搭建(二)
  5. atitit.web的动态include 跟变量传递 java .net php
  6. Oracle ORA-12519: TNS:no appropriate service handler found 解决
  7. sorcketlog
  8. C:预编译指令
  9. UVa 1213 (01背包变形) Sum of Different Primes
  10. linux环境
  11. DOM生成XML文档
  12. Linux常用命令(第二版) --网络通信命令
  13. python 提取pdf文字
  14. unity游戏热更新
  15. 【Python】Xml To Excel
  16. 常见内网IP段
  17. ES6生成器函数generator
  18. firedac数据集数据序列为JSON
  19. Lucene的入门
  20. 面向对象php 接口 抽象类

热门文章

  1. 不写一行代码,利用常用工具和软件批量下载URL资源
  2. 中文代码示例之Vuejs入门教程(一)
  3. 遍历文件 创建XML对象 方法 python解析XML文件 提取坐标计存入文件
  4. CSS样式表学习
  5. 【bird-front】全自动数据表格组件bird-grid
  6. 解决myeclipse部署按钮不能点
  7. Python 学习笔记大纲
  8. Java框架之Hibernate(四)
  9. python 中__setattr__, __getattr__,__getattribute__, __call__使用方法
  10. Core Animation 文档翻译 (第二篇)