详解动画插件wow.js的使用方法

本文介绍了动画插件wow.js的使用方法 ，具体如下，分享给大家

1,下载文件

animate.css 下载地址: http://daneden.github.io/animate.css/

wow.min.js 下载地址:  http://www.downyi.com/downinfo/37040.html#address

2,引入文件

<link rel="stylesheet" href="css/animate.css" rel="external nofollow" >
<script src="js/wow.min.js"></script>
<script>
  new WOW().init();
</script>

3,观察你需要的效果

http://daneden.github.io/animate.css/

4,在需要动画的标签上添加,wow 和 你的动画元素

5, wow.js 源码网址:   http://www.bootcdn.cn/wow/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解wow.js中各种特效对应的类名

    一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了. 虽然效果出来了,但是网上并没有整理好的各种特效对应的类名,所以写一篇通俗易懂(最起码自己能看懂)的文章供大家参考学习.(^_^) 二.首先说明一下怎么使用这个插件: 1.wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.c

  • JS库之wow.js使用方法

    JS库之wow.js使用方法

    近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址 使用方法真是超简单~~ 需要配合Animated.css使用 方法如下: 1.引用wow.js或者wow.min.js 和 animate.css 2.在需要用到这个效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s",具体所表示的含

  • 详解动画插件wow.js的使用方法

    本文介绍了动画插件wow.js的使用方法 ,具体如下,分享给大家 1,下载文件 animate.css 下载地址: http://daneden.github.io/animate.css/ wow.min.js 下载地址:  http://www.downyi.com/downinfo/37040.html#address 2,引入文件 <link rel="stylesheet" href="css/animate.css" rel="exter

  • 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload

  • 详解vue-amap引入高德JS API的原理

    详解vue-amap引入高德JS API的原理

    目录 vue-amap使用 vue-amap入口文件 initAMapApiLoader方法 AMapAPILoader类 _getScriptSrc方法 loadUIAMap方法 总结 vue-amap是对高德地图JS API进行封装的.适用于vue项目的地图组件库.在笔者开发的很多项目中都有用到,相比直接使用高德地图JS API 来说,vue-amap更加好用,符合vue开发者的编程习惯.本文通过vue-amap源码分析了vue-amap引入高德JS API的原理. vue-amap使用 在

  • 详解如何使用Node.js实现热重载页面

    前言 前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面. 那么,我今天就总结一下吧,以防止大家也跟我一样. 热重载 所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新. 热更新 浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面. 目的:加快开发速度,所以只适用于开发环境下使用. 思路

  • 基数排序算法的原理与实现详解(Java/Go/Python/JS/C)

    目录 说明 实现过程 示意图 性能分析 代码 Java Python Go JS TS C C++ 链接 说明 基数排序(RadixSort)是一种非比较型整数排序算法,其原理是将整数按位数切割成不同的数字,然后按每个位数分别比较.由于整数也可以表达字符串(比如名字或日期)和特定格式的浮点数,所以基数排序也不是只能使用于整数.基数排序的发明可以追溯到1887年赫尔曼·何乐礼在列表机(Tabulation Machine)上的 基数排序的方式可以采用LSD(Least significant di

  • 详解在vue使用weixin-js-sdk常见使用方法

    链接:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6 1.导入依赖包 npm install weixin-js-sdk 2.判断是否是在微信浏览器中 env.js <script> var ua = navig

  • 详解Swift model 解析的两种方法

    详解Swift model 解析的两种方法 1. 常规解析方法 //懒加载声明一个LJNewsModel为数据的数组 lazy var ljArray : [LJNewsModel] = [LJNewsModel]() //MARK:-- 数据获取和解析 extension NewsViewController{ func requestNetData(){ /* 打印json数据 */ LJDownLoadNetImage.request("GET", url: "http

  • 详解PHP处理字符串类似indexof的方法函数

    详解PHP处理字符串类似indexof的方法函数 在PHP中处理字符串类似 indexof 的函数或方法有两个,它们是 strpos 函数和 stripos 函数,这两个函数的用法类似. strpos 函数处理字符串时如果包含该字符串,则返回该字符串出现的第一次出现的位置,如果没有出现则返回 false.对字符串大小写敏感. stripos 函数处理字符串时如果包含该字符串,则返回该字符串出现的第一次出现的位置,如果没有出现则返回 false.对字符串大小写不敏感. PHP strpos() 函

  • 详解Spring mvc ant path的使用方法

    详解Spring mvc ant path的使用方法 概要: 任何一个WEB都需要解决URL与请求处理器之间的映射,spring MVC也是一样,但Spring MVC就像Spring所作的一切一样(灵活,可以配置各种东西,但是也造成了很多复杂性),肯定不会只有一种方法来映射URL和 Controller之间的关系,并且在实际上,允许你自己创建映射规则和实现,而不仅仅依赖URL映射. 1.Spring path match Spring MVC中的路径匹配要比标准的web.xml要灵活的多.默认

  • 详解Java注解的实现与使用方法

    详解Java注解的实现与使用方法 Java注解是java5版本发布的,其作用就是节省配置文件,增强代码可读性.在如今各种框架及开发中非常常见,特此说明一下. 如何创建一个注解 每一个自定义的注解都由四个元注解组成,这四个元注解由java本身提供: @Target(ElementType.**) 这是一个枚举,它置顶是该自定义的注解使用的地方,像类.变量.方法等 @Retention(RetentionPolicy.**)作用是标明注解保存在什么级别,像在编译时.class文件中,vm运行中 @D

随机推荐