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",具体所表示的含义在下图中有说明

  3.初始化wow.js

  代码如下:

 <script>
  wow = new WOW({
    animateClass: ‘animated‘,
  });
  wow.init();
  </script>

总结

以上所述是小编给大家介绍的S库之wow.js使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-09-13

详解动画插件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

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

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

详解node.js中的npm和webpack配置方法

概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

详解Vue.js中.native修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

详解Node.js中的Async和Await函数

在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯

详解Node.js中的事件机制

前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操

详解Vue.js中引入图片路径的几种方式

vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源 例如, url(./imag

详解Nuxt.js中使用Element-UI填坑

Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack.nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目.Element-UI则是一个机遇Vue2.0+开发的一套UI框架,实现了常用的组件,可帮助开发者快速搭建一个如CMS系统.后台管理系统等基于Vue的系统. 由于Element-UI目前在SSR支持方面还是不够完善,且Nuxt.js在文档方面也有欠缺,所以在Nuxt.js中使用Element-UI也是一段坑路,需要去将查看Nuxt源码与Element

详解Node.js中path模块的resolve()和join()方法的区别

关于Node.js中path模块的resolve()和join()方法的比较,对照着总结看例子差不多以后在写模块的时候思路就能很清晰了 resolve 作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径. 语法:path.resolve([...paths]) 说明: ...paths <string> 一个路径或路径片段的序列 如果没有传入 path 片段,或者path 片段长度为零(空字符),则 path.resolve() 会返回当前工作目录的绝对路径(相当

详解Sea.js中Module.exports和exports的区别

一.官方解释 因为SeaJs和Nodejs都是基于CommonJS,所以直接看的Node的官方文档解释 Module.exports The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired exp

详解Angular.js中$http拦截器的介绍及使用

前言 $http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互.在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换):当然还有可能对在请求和响应过程过发生的问题进行捕获处理.所有这些需求在开发中都非常常见,所以Angular为我们提供了$http拦截器,用来实现上述需求. 什么