由于坐忘的需要，经常会有部分功能用的很多，做起来又很繁琐，所以插件也就应运而生了。个人感觉正式js强大的可植入性，

才使他如此的使用火爆，反正博主是特别喜欢这一点  Y(^o^)Y~ 。

　　今天就和大家分享几个比较实用的小插件，省的大家整理了。

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

　　　　这款插件作用很简单，及时实现网页中任意部分动画切入的效果。但是有2点要注意的地方

　　　　　　（1）此动画是检测屏幕滚动条实现达到一定位置执行动画效果的，所以当指定元素开始显示的时候才会开始动画，这个用户可以设置

　　　　　　（2）每个元素只能执行一种动画，不能同时实现多种动画一起播放的效果

　　　　现在就来详细介绍一下这个插件如何使用，我们先来看一段代码，展示一下动画效果

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/animate.min.css" />

        <style type="text/css">

            div{

                        width: 100px;

                        height: 100px;

                        background-color: yellow;

                        margin: 50px;

                    }

        </style>

    </head>

    <body>

        <div class="wow lightSpeedIn col-md-3" data-wow-iteration="" data-wow-duration="3s">lightSpeedIn从右慢慢摇曳进入</div>

            <div class="wow rollIn col-md-3" data-wow-iteration="" data-wow-duration="3s">rollIn从左边旋转进入</div>

            <div class="wow pulse col-md-3" data-wow-iteration="" data-wow-duration="3s">pulse变大</div>

            <div class="wow flipInX col-md-3" data-wow-iteration="" data-wow-duration="3s">flipInX绕y轴晃</div>

            <div class="wow shake col-md-3" data-wow-iteration="" data-wow-duration="3s">shake左右晃动</div>

            <div class="wow swing col-md-3" data-wow-iteration="" data-wow-duration="3s">swing吊在那要摇晃</div>

            <div class="wow bounce col-md-3" data-wow-iteration="" data-wow-duration="3s">bounce原地上下抖动</div>

            <div class="wow bounceInLeft col-md-3" data-wow-iteration="" data-wow-duration="3s">bounceInLeft从左方进来上下抖动</div>

            <div class="wow bounceInRight col-md-3" data-wow-iteration="" data-wow-duration="3s">bounceInRight从右方进来上下抖动</div>

            <div class="wow bounceInDown col-md-3" data-wow-iteration="" data-wow-duration="3s">bounceInDown从上方进来上下抖动</div>

            <div class="wow bounceInUp col-md-3" data-wow-iteration="" data-wow-duration="3s">bounceInUp从下方进来上下抖动</div>

    </body>

    <script language="JavaScript" src="js/jquery-1.10.2.js"></script>

    <script language="JavaScript" src="js/wow.min.js"></script>

　　<script type="text/javascript">

        /*初始化自动动画wow.min.js插件*/

        new WOW().init();

    </script>

</html>

　　　　以下是代码的效果图：

　　　　

　　　　首先，介绍插件需要插入的文件和初始化流程，因为这个插件是基于animate编写的，所以插入文件得注意一下

<link rel="stylesheet" type="text/css" href="css/animate.min.css" />

.........

<script language="JavaScript" src="js/jquery-1.10.2.js"></script>

<script language="JavaScript" src="js/wow.min.js"></script>
<script type="text/javascript">

        /*初始化自动动画wow.min.js插件*/

        new WOW().init();

    </script>

　　　　上述是简单的调用默认的样式，也可以自己 自定义动画：

var wow = new WOW({

    boxClass: 'wow',

    animateClass: 'animated',

    offset: ,

    mobile: true,

    live: true

});
　　　　boxClass    填字符串    ‘wow’是需要执行动画的元素的 class名
　　　　animateClass    字符串    ‘animated’是animation.css 动画自带的 class名
　　　　offset    整数    0 表示目标元素距离可视区域多少开始执行动画
　　　　mobile    布尔值    true    是否在移动设备上执行动画
　　　　live    布尔值    true    异步加载的内容是否有效

　　接下来介绍一下动画播放的一些属性：
　　　　data-wow-duration="3s"   设置动画播放一次需要的时间
　　　　data-wow-delay="3s"   设置动画延迟多久开始执行
　　　　data-wow-iteration="5"   设置动画执行多少次

　　再介绍一下常用的几种默认动画样式：
　　　　lightSpeedIn：从右慢慢摇曳进入
　　　　rollIn：从左边旋转进入
　　　　pulse:变大
　　　　flipInX:绕x轴晃
　　　　shake:左右晃动
　　　　swing:吊在那要摇晃
　　　　bounce:原地上下抖动
　　　　bounceInLeft:从左方进来上下抖动
　　　　bounceInRight:从右方进来上下抖动
　　　　bounceInDown:从上方进来上下抖动
　　　　bounceInUp:从下方进来上下抖动
　　当然效果不止这些，比如说有flipInX，就有flipInY，但是没有绕Z轴转的哈。其他属性也是一样，都有很多的扩展，在这里就不一一列举了

WOW.js轻松为网页添加动画切入效果的更多相关文章

  1. animate.css+wow.js页面滚动即时显示动画

    1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...

  2. 用 JS + LeanCloud 给网页添加数据库（留言功能）

    记录给自己网页添加留言功能的过程. 使用工具:LeanCloud,一个自带数据库和增删改查(CRUD)功能的后台系统. 1 在JS中引入LeanCloud官方库 在LeanCloud注册并添加应用的步 ...

  3. ACtivity实现欢迎界面并添加动画切换效果

    先看效果: 中间切换动画没来得及截图,凑合着看吧. 主要是java代码的实现: Welcom.java package kehr.activity.welcome; import android.ap ...

  4. [WPF自定义控件库]了解WPF的布局过程，并利用Measure为Expander添加动画

    1. 前言 这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...

  5. 在网页中添加动画，使用WOW.js来实现

    [来源] 页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意 刚知道wow.js这个插件,之前写的类似滚动时页面效果都是自己用jQuery写的,现在有了插件,开发更 ...

  6. 网页延迟加载动画的实现-WOW.js

    网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差 一开始觉得好难好复杂好高大上,直到我发现 wow.js …… 首先是演示地址:https://www.delac.io/wow/ 嗯,狗子确实很 ...

  7. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  8. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

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

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

随机推荐

  1. (15)IO流之File

    File类用封装了一个文件夹或者文件的所有属性. File类的构造方法: File(String pathname) 指定文件或者文件夹的路径创建一个File文件 File(File parent, ...

  2. java操作txt文本（一）：遇到指定字符换行

    想法由来:有时查看网页源代码的css文件内容,竟是恼人的压缩后代码(不换行),如下图所示-- 它的可读性很差,所以写了下面这个简单的程序,实现自动换行. 适用条件:遇到指定字符换行(本例中遇到'}'换 ...

  3. windows phone 8.1开发:文件选择器FileOpenPicker

    原文出自:http://www.bcmeng.com/fileopenpicker/ 今天小梦给大家分享一下 windows phone 8.1中的文件选择器,和之前的windows phone8的不 ...

  4. build.gradle代码

    Android Studio 这么强大的工具,就算我们不懂 gradle, groovy, 也照样能借助AS对 Android 项目进行编译.调试.运行.打包等操作.build.gradle 这个文件 ...

  5. 想系统的学习一下项目管理，推荐PRINCE2

    参加pmp培训,考个pmp证书就足矣应付面试. 个人并不推荐看那些外文原版书籍,我看过一两本,水平与实用性并不是你想象的那么好,除非你是做理论研究,为了发表论文. 另一本就推荐prince2的教材,p ...

  6. Linux网络那点事

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 之前的之前说过网络自连接的配置(CentOS服务器网络配置:http://ww ...

  7. MongoDB基础教程系列--第三篇 MongoDB基本操作（二）

    1.集合操作 1.1.创建集合 MongoDB 用 db.createCollection(name, options) 方法创建集合. 格式 db.createCollection(name, op ...

  8. C#调用webbrowser，阻止弹出新HTML页面

    参考资料: 1.C#调用webbrowser,阻止弹出新IE窗口 http://www.cnblogs.com/blindman/p/3819649.html 2.[WPF]监听WPF的WebBrow ...

  9. asp.net core源码飘香：Logging组件

    简介: 作为基础组件,日志组件被其他组件和中间件所使用,它提供了一个统一的编程模型,即不需要知道日志最终记录到哪里去,只需要调用它即可. 使用方法很简单,通过依赖注入ILogFactory(Creat ...

  10. 脚本语言：Xmas（二）

    本篇,来谈谈类型系统,以及部分与垃圾收集器相关的内容. 一.基本类型 Xmas的基本类型:Null.Boolean.Label.String.Ref.Function.Integer.Float.De ...