由于坐忘的需要，经常会有部分功能用的很多，做起来又很繁琐，所以插件也就应运而生了。个人感觉正式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. IDEA使用心得-----懒得截图了，但是大家应该看得懂

    1.界面设置,有白色和 黑色风格两种,我个人喜欢黑色风格,护眼最重要的是看着帅. 设置方法:FILE--Settings--Editor--Colors&Fonts--Scheme name ...

  2. 实际比较filter2D和imfilter之间的关系

    实际比较filter2D和imfilter之间的关系 ​                  卷积运算是图像处理和增强中经常遇到的一种算法.由于很多优秀的开源算法都是采用matlab编写的,在我改写为c ...

  3. Android自学反思总结(上)

    从接触Android到现在有几个月的时间了,基本全部都是靠自学,从大一上学期学习完c语言,接着利用寒假时间和开学一个月左右的时间自学完javase,接着在导员的督促下,开始了Android学习之旅,现 ...

  4. WPF: 本地化(Localization) 实现

    本文将讨论一种较为方便的本地化方法. 由于在项目中要实现本地化,所以在网上查找相关的解决方案.通过一系列调研,发现实现本地化的方法主要有以下三种: 通过编译项目以设置 x:Uid 并使用 LocBam ...

  5. Butter Knife使用详解

    Butter Knife Github地址: https://github.com/JakeWharton/butterknife 官方说明给出的解释是 Bind Android views and ...

  6. Fireworks快捷键大全和ps查看切图的坐标颜色

    记住后方便了许多

  7. vue组件递归

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 第一章：shiro简介

    1.1 简介 Apache Shiro是java的一个安全框架,相当简单,没有Spring Security功能强大,但是实际工作中大多使用shiro就够了.可以帮助我们完成:认证,授权,加密,会话管 ...

  9. [原]C#与非托管——初体验

    P/Invokes初看起来非常简单,利用DllImport进行extern函数的声明,程序就可以在调用extern函数的时候自动查询调用到对应的非托管函数,有些类似Java的native函数,但更为简 ...

  10. 老李分享：webservice是什么？2

    web service 组件 基本的 web service 平台是 XML + HTTP.所有标准的 web service 使用以下组件: SOAP(简单对象访问协议) UDDI(通用描述.发现与 ...