1、地址引入

<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<script src="js/wow.min.js" type="text/javascript"></script>

2、HTML部分

 <div class="animated bounceInRight wow" data-wow-delay="0.4s" style="visibility: visible;animation-delay: 0.4s"></div>

注:bounceInRight为animate.css中的动画方式,具体可见官方API给出的示例:https://daneden.github.io/animate.css

3、wow.js初始化代码

<script type="text/javascript">
new WOW().init();
</script>

注:以下是一些自定义配置:

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

  

animate.css+wow.js页面滚动即时显示动画的更多相关文章

  1. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  2. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  3. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  4. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  5. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  6. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  7. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  8. scrollReveal.js页面滚动动态效果

    scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScrip ...

  9. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

随机推荐

  1. x01.AntWorld: An Python AI Game

    1. 学习了一下 AI 五子棋,顺手改作 19 路的棋盘,便于围棋通用.render.py 主要修改如下: # 常量部分: IMAGE_PATH = 'img/' StoneSize = 32 WID ...

  2. 使用webpack配置vue项目代理 (超简单)

    我们都知道,前端开发跨域是一个很常见的问题,当然跨域的方法也有很多,现在我就给大家分享一个在vue项目中如何使用webpack做代理,步骤简单,操作方便,本人亲测,巨好使

  3. 【源码解析】Sharding-Jdbc中的算法

    Sharding-jdbc中的很多地方涉及到算法,比如主从配置这块.分库分表这块.本文主要从源码角度介绍下,目前主要包含哪些算法,以及这些算法的内容. 一.读写分离(主从配置) 这块的代码主要在cor ...

  4. Maven工程下报错:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    Maven工程下,webapp下面新建index.jsp文件,报如下错误. 原因很简单,没有安装如下maven依赖包: <dependencies> <!-- JSP相关 --> ...

  5. 《Linux命令行与shell脚本编程大全》第十三章 更多的结构化命令

    本章讨论bash shell的循环命令for.while和until 13.1 for命令 重复执行一系列命令在编程中很常见. bash shell提供了for命令,允许你创建一个遍历一系列值的循环. ...

  6. 使用face_recognition批量识别图片中的人数

    #使用face_recognition实现从图片中选中人数并分别输出txtimport face_recognition import cv2 import os fin = 'D:\\Users\\ ...

  7. MSSQL-并发控制-2-Isolation

              如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各位支持!   MySQL通过MVCC和锁来实现并发控制,在4 ...

  8. 开源项目 log4android 使用方式详解

    话不多说, 直接上主题. log4android 是一个类似于log4j的开源android 日志记录项目. 项目基于 microlog 改编而来, 新加入了对文件输出的各种定义方式. 项目地址: 点 ...

  9. static,final,包,访问修饰符,内部类

    static 关键字可以修饰成员变量,被static修饰的成员变量归属于类static关键字可以修饰成员方法:被static修饰的成员方法可以直接使用类名调用,也可以通过对象调用,建议使用类名.非静态 ...

  10. cinder控制节点集群

    #cinder控制节点集群 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder块存储控制节点.txt.s ...