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

　　由于坐忘的需要，经常会有部分功能用的很多，做起来又很繁琐，所以插件也就应运而生了。个人感觉正式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轻松为网页添加动画切入效果的更多相关文章

animate.css+wow.js页面滚动即时显示动画
1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...
用 JS + LeanCloud 给网页添加数据库（留言功能）
记录给自己网页添加留言功能的过程. 使用工具:LeanCloud,一个自带数据库和增删改查(CRUD)功能的后台系统. 1 在JS中引入LeanCloud官方库在LeanCloud注册并添加应用的步 ...
ACtivity实现欢迎界面并添加动画切换效果
先看效果: 中间切换动画没来得及截图,凑合着看吧. 主要是java代码的实现: Welcom.java package kehr.activity.welcome; import android.ap ...
[WPF自定义控件库]了解WPF的布局过程，并利用Measure为Expander添加动画
1. 前言这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...
在网页中添加动画，使用WOW.js来实现
[来源] 页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意刚知道wow.js这个插件,之前写的类似滚动时页面效果都是自己用jQuery写的,现在有了插件,开发更 ...
网页延迟加载动画的实现-WOW.js
网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差一开始觉得好难好复杂好高大上,直到我发现 wow.js …… 首先是演示地址:https://www.delac.io/wow/ 嗯,狗子确实很 ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

随机推荐

pycharm社区版无database 解决方法
第一步,点击file/setting/plugins 如下图所示第二步,搜索database 安装database Nivagator 并Apply 第三步,新建数据库连接,open sql con ...
wireshark过滤规则
WireShark过滤语法 1.过滤IP,如来源IP或者目标IP等于某个IP 例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.ad ...
MyBatis解决字段名与实体类属性名不相同的冲突（四）
一.创建表和表数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no ), order_price FLOA ...
CDMA sid, nid, bid 含义解释
copyright@ celldb.cc SID 是系统识别码,每个地级市只有一个sid,是唯一的. NID是网络识别码,由各本地网管理,也就是由地级分公司分配.每个地级市可能有1到3个nid. BI ...
artemplate使用
最近写了一个菜谱展示的网页,其中用到了artemplate模板,关于artemplate的好处就不多说了,直接上干货 1. <script src="js/template-nativ ...
response.getWriter().write()与out.print()的区别(转)
1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通 ...
response.setHeader("Content-disposition","attachment;filename="+fileName) 下载时文件名中存在空格错误
最近在进行文件下载时发现一个问题,就是下面语句运行时,下载某些文件正常,下载某些文件异常,后来发现文件名中有空格的文件火狐浏览器是默认将文件名截断了的 response.setHeader(" ...
JS弹出框
一.JS三种最常见的对话框 1.alert()警告框 alert是警告框,只有一个按钮"确定"无返回值,警告框经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点 ...
Android ShellUtils
Android中执行Shell命令的工具类 public class ShellUtils { public static final String COMMAND_SU = "su&quo ...
关闭discuzX3.2注册页面的注册邮箱验证
论坛升级后发现注册用户在输入任何邮箱email时,一直提示email 地址无效.用firephp跟踪发现:随机生成的email的后缀是@localhost! 找到原因,修改如下: //原来代码 if( ...

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

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

随机推荐

热门专题