animate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background: skyblue;
margin: 10 auto;
}
</style>
</head>
<body>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div>
<div class="div1 wow bounceIn"> </div> <!--
持续时间/延迟时间/偏移值/迭代次数
-->
<div class="div1 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="div1 wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div> <script src="js/wow.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var obj = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
}
new WOW(obj).init(); //属性/方法 类型 默认值 说明
//boxClass 字符串 ‘wow’ ‘wow’需要执行动画的元素的 class
//animateClass 字符串 ‘animated’ ‘animated’animation.css 动画的 class
//offset 整数 0 距离可视区域多少开始执行动画
//mobile 布尔值 true 是否在移动设备上执行动画
//live 布尔值 true 异步加载的内容是否有效
</script>
</body>
</html>
animate.html的更多相关文章
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- 原生javascript 实现 animate
原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- 简单animate方法的封装
function animate(ele,json,fn){ clearInterval(ele.timer); ele.timer = setInterval(function () { var b ...
- jquery的animate({})动画整理
在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...
- 使用jQuery的animate方法制作滑动菜单
周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- 【小贴士】关于transitionEnd/animate的一个有趣故事
前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当时主要使用tra ...
- 网页返回顶部之animate方法
点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...
随机推荐
- Servlet与Tomcat运行示例
Servlet与Tomcat运行示例 本文将写一个servlet,然后将其部署到Tomcat的全过程.本文参考<深入拆解Tomcat_Jetty>内容. 一.基于web.xml开发步骤 下 ...
- Spring 梳理-数据访问-DB
针对接口编程 DAO是指数据访问对象(data access object),它提供了数据读取和写入到数据库中的一种方式.Spring认为,它应该以接口的方式发布功能,而应用程序的其他部分需要通过接口 ...
- RocketMQ学习 -> NameServer路由中心
RocketMQ项目代码核心目录说明 broker:broker启动进程 client:消息客户端,包含消息生产者,消息消费者相关类 common:公共包 dev:开发者信息(非源代码) distri ...
- 夯实Java基础系列11:深入理解Java中的回调机制
目录 模块间的调用 多线程中的"回调" Java回调机制实战 实例一 : 同步调用 实例二:由浅入深 实例三:Tom做题 参考文章 微信公众号 Java技术江湖 个人公众号:黄小斜 ...
- Python集训营45天—Day08 (文件操作)
目录 1. 文件操作介绍 2. 文件的读写 2.1 文本文件 2.2 二进制文件 2.3 JSON文件 3. 文件的定位,重命名和删除 4. 文件夹的相关操作 1. 文件操作介绍 大家应该听说过一句话 ...
- Scala 多继承顺序
Trait多继承顺序: 准则: 如果有超类,则先调用超类的函数. 如果混入的trait有父trait,它会按照继承层次先调用父trait的构造函数. 如果有多个父trait,则按顺序从左到右执行. 所 ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- 常用注解@Controller、@Service、@Autowired
@Controller.@Service在spring-context-5.1.10.RELEASE.jar包下,所在包如下 @Autowired在spring-beans-5.1.10.RELEAS ...
- link 和 @import 的区别是什么?
link语法结构: <link href="url" rel="stylesheet" type="text/css"> @im ...
- 富文编辑器和bs4简单实用
目录 使用方法 官方网址 图片上传下载实例 菜单栏功能筛选 bs4 导入 提取标签内的文本内容 目录 使用方法 直接给输入框绑定事件即可,注意引入js方式有点不一样,多加编码方式 <script ...