由于坐忘的需要，经常会有部分功能用的很多，做起来又很繁琐，所以插件也就应运而生了。个人感觉正式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. ipconfig显示IP地址情况

    1.以太网适配器 Local Area Connection 若电脑是本地连接,则ipv4地址是本机的ip地址,默认网关一般为本机所连接路由器的地址. 2.无线局域网适配器 Wireless Netw ...

  2. JDK中日期和时间的几个常用类浅析(三)

    java.text.SimpleDateFormat   SimpleDateFormat类是用于把字符串解析成日期时间和把日期时间格式化成字符串的工具类.该类主要和java.util.Date类配合 ...

  3. 一个web应用的诞生(9)--回到用户

    在开始之前,我们首先根据之前的内容想象一个场景,用户张三在网上浏览,看到了这个轻博客,发现了感兴趣的内容,于是想要为大家分享一下心情,恩?发现需要注册,好,输入用户名,密码,邮箱,并上传头像后,就可以 ...

  4. How do you make an awesome team?(来考验一下自己的英语能力吧)

    How do you make an awesome team? I was talking to my awesome friend Amy Hanlon (who is a software en ...

  5. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  6. dotweb——go语言的一个微型web框架（三）路由注册

    上一章我们讲了如何启动一个dotweb程序,本篇文章将介绍如何注册路由. router是dotweb用来管理路由的结构体,它提供了一些关于路由操作函数. app := dotweb.New() rou ...

  7. 我所理解的javascript中函数的作用域和作用域链

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p 写在前面 一周木有更新了,今天终于攻克了自行车难关,非常开心,特意来一更~ (那些捂嘴偷笑的人我看到你们了快把嘴闭上我会假装没看 ...

  8. html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

    众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键 oncontextmenu="return false" 禁止 ...

  9. JDBC基础学习(四)—数据库事务

    一.事务基本认识 1.事务的概述      为了保证数据库中数据的一致性,数据的操作应当是离散的成组的逻辑单元.当它全部完成时,数据的一致性可以保持,而当这个单元中的一部分操作失败,整个事务应当全部视 ...

  10. Windows入门基础：2.vs2013中Icon显示

    第一:系统小图标的显示 wndclass.hIcon = LoadIcon(NULL,IDI_WARNING); //LoadIcon函数的第一的参数要为0,第二个参数是系统自定义的ID号: IDI_ ...