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 实现了在网页滚动时的动画 ...

随机推荐

嵌入式ARM开发环境搭建
1. 安装,配置,启动FTP服务安装FTP: sudo apt-get install vsftpd 修改vsftpd的配置文件/etc/vsftpd.conf,将下面两行的'#'去掉#local_ ...
设置int、float型数据的输出格式
设置整型输出的有效位数,比如在输出时间时时.分.秒都是两位有效数字,如果是5分钟应该输出00:05:00.需要加上头文件<iomanip> cout<<setw(2)<& ...
用Java实现将多级文件夹下的所有文件统一放到一个文件夹中
每次下了电影(男生懂得呦),每部电影都放在一个单独的文件夹里,看的时候很是不方便啊,一直重复着进入文件夹.后退,再进.再退的操作,而手动把这些电影全部复制出来又太繁琐.因此为了解决这个问题,用IO写了 ...
celldb.cc
欢迎光临 celldb.cc 的新博客老博客的内容就不搬迁了, 工作量太大. http://celldb.cc 主要功能: 1 话单基站轨迹分析 2 基站查询 3 邻近基站查询 4 CDMA根据城市 ...
《连载 | 物联网框架ServerSuperIO教程》- 17.支持实时数据库，高并发保存测点数据。附：3.4 发布与版本更新说明。
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
[Android]使用RecyclerView替代ListView（四：SeizeRecyclerView）
以下内容为原创,欢迎转载,转载请注明来自天天博客:<> [Android]使用RecyclerView替代ListView(四:SeizeRecyclerView) 在RecyclerV ...
css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
Java反射理解
序言一般而言,动态语言是指程序运行时,允许改变程序结构或变量类型的语言. 从这个观点来看,Perl.Python.Ruby是动态语言,C++.Java.C#不是动态语言. 但是Java有动态相关机制 ...
JavaWeb总结(一)—Servlet
一.Servlet生命周期 1.Servlet生命周期 Serlet加载---->实例化---->服务---->销毁 2.init() Servlet容器启动时:读取web.xml配 ...
Android5.0水波纹效果ripple实现
1.如何设置波纹效果 // 波纹有边界 android:background="?android:attr/selectableItemBackground" // 波纹超出边界 ...

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

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

随机推荐

热门专题