wow.js动画插件
首先说明一下怎么使用这个插件:
1、wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css。
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
2、在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。(无需引用jQuery)
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script>
注意new WOW().init();中的WOW要大写,否则就没效果了。
3.一些动画效果
wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn 从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值
wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度)
wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右)
wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值
wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳)
wow flipInX 原位置后仰前栽、透明度从100%变化至设定值
wow flipInY 原位置左右旋动、透明度从100%变化至设定值
wow bounce 上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
wow shake 左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
wow swing 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变
wow bounceInU 原位置不变、直接从不显示到显示(无过过渡效果)
wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
以下是代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>分享</title>
<link rel="stylesheet" href="css/animate.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
font-family: "Microsoft Yahei";
}
body h1 {
width: 100%;
margin: 80px 0;
font-size: 50px;
font-weight: 500;
text-align: center;
}
body .txt {
margin: 80px 0;
font-size: 16px;
text-align: center;
}
.dowebok {
margin: 0 auto;
}
.dowebok ul {
list-style-type: none;
}
.dowebok .row {
font-size: 0;
text-align: center;
}
.dowebok .wow {
display: inline-block;
width: 280px;
height: 280px;
margin: 100px 15px 0;
border-radius: 50%;
font: 30px/280px "Microsoft Yahei";
vertical-align: top;
*display: inline;
zoom: 1;
}
.bg-green {
background: #5bd5a0;
}
.bg-blue {
background: #1daee9;
}
.bg-purple {
background: #c843a5;
}
.bg-red {
background: #eb3980;
}
.bg-yellow {
background: #ffcc35;
}
</style>
</head>
<body>
<h1>WOW.js - 让页面滚动更有趣</h1>
<div class="dowebok">
<div class="row">
<div class="wow rollIn bg-blue" data-wow-delay="1s" data-wow-duration="1s">1</div>
<div class="wow bounceInDown bg-green" data-wow-delay="2s" data-wow-duration="1s">2</div>
<div class="wow lightSpeedIn bg-purple" data-wow-delay="1s" data-wow-duration="2s">3</div>
</div>
<div class="row">
<div class="wow rollIn bg-yellow" data-wow-delay="0.5s">4</div>
<div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">5</div>
<div class="wow bounceInRight bg-blue" data-wow-delay="1s" data-wow-duration="1s">6</div>
</div>
<div class="row">
<div class="wow bounceInLeft bg-green" data-wow-delay="1s" data-wow-duration="1s">7</div>
<div class="wow flipInX bg-purple" data-wow-delay="1s" data-wow-duration="1s">8</div>
<div class="wow bounceInRight bg-yellow" data-wow-delay="2s" data-wow-duration="1s">9</div>
</div>
<div class="row">
<div class="wow rollIn bg-blue" data-wow-delay="1s" data-wow-duration="3s">10</div>
<div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s">11</div>
<div class="wow swing bg-purple" data-wow-iteration="2">12</div>
</div>
<div class="row">
<div class="wow rollIn bg-red" data-wow-delay="1s" data-wow-duration="3s" data-wow-iteration="2">13</div>
<div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">14</div>
<div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s">15</div>
</div>
<div class="row">
<div class="wow bounceInLeft bg-purple">16</div>
<div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s">17</div>
<div class="wow lightSpeedIn bg-yellow">18</div>
</div>
<div class="row">
<div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s">19</div>
<div class="wow bounceInUp bg-red" data-wow-iteration="1">20</div>
<div class="wow bounceInRight bg-purple" data-wow-iteration="2">21</div>
</div>
<div class="row">
<div class="wow rollIn bg-red" data-wow-delay="0.5s">22</div>
<div class="wow bounceInDown bg-green" data-wow-delay="1s">23</div>
<div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">24</div>
</div>
<div class="row">
<div class="wow rollIn bg-red" data-wow-iteration="1">25</div>
<div class="wow bounceInDown bg-green" data-wow-iteration="2">26</div>
<div class="wow bounceInRight bg-yellow" data-wow-iteration="3">27</div>
</div>
</div>
<script src="js/wow.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
<!--
data-wow-duration(动画持续时间)
data-wow-delay(动画延迟时间)
data-wow-iteration="6"(动画持续次数)
data-wow-offset(元素的位置露出后距离底部多少像素执行)
wow.js动画插件相关推荐
- 前端插件 -- WOW.js动画插件
WOW.js动画插件 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画.wow.js 依赖 animate.css,所以它支持 animate.c ...
- vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
- 【前端】使用wow.js这个插件(实现页面动画效果),提高前端开发效率。
1.简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画. wow.js 依赖 animate.css,所以它支持 animate.css 多达 ...
- velocity.js 动画插件
1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...
- lottie.js动画插件自定义机器人行走
下载地址lottie.js是一个动画插件,这是个lottie.js可以自定义机器人动作的示例代码. dd:
- wow.js动画效果
1.因wow.js依赖于animate.css 所以要安装 wowjs 和 animate.css npm install wowjs --save -dev // wowjs npm install ...
- 前端动画 wow.js 效果
让花里胡哨的特效变简单 wow.js动画class介绍 引入css样式以及js插件 <link rel="stylesheet" type="text/css&qu ...
- wow.js怎么使用这个插件
wow.js中各种特效对应的类名 一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果 ...
- 动态效果html wow,WOW.js轻松让网页实现动画效果
给大家分享一个小插件,名字叫做WOW.js,这个插件是基于animate.css,animate.css是现在很流行的css动画库.这款插件作用很简单,可以及时实现网页中任意部分动画切入的效果.但是有 ...
- Wow.js学习笔记
Wow.js学习笔记 前期准备 注意:通过引入cdn的树懒,注意版本问题(小白我就是因为失败就去乖乖下载wow.js本地文件) 1.wow.js 因依赖于animate.css,首先在头部引用anim ...
最新文章
- webpack配置模块的查找范围
- jQuery 序列化表单数据 serialize() serializeArray()
- HashSet.contains
- dwcs6怎么添加搜索框_一文教会你微信小程序搜索怎么用、怎么优化
- MSP430F5XXX中的ADC12使用
- 根据个人亲身进阶架构师经历系统构建20大进阶架构师专题!
- Openwrt 串口密码登入【ZT】
- 决策树 随机森林 xgboost_推荐收藏 | 决策树、随机森林、bagging、boosting、Adaboost、GBDT、XGBoost总结...
- android开发复制文本,如何在Android应用中以编程方式复制文本?
- 计算机专硕超过270分人数,从18调剂看19备考策略(附76所院校19招生简章)
- 统信UOS安装flash浏览器插件
- 安卓手机屏幕怎么投射到电脑显示器
- vc707(virtex7)FLASH下载实验
- php实现加密解密,PHP实现的加密解密处理类
- 2022年~全网最真实的软件测试面试题合集
- TCP三次握手、四次握手过程,以及原因分析
- thingJS模模搭(campusbuilder/momoda)及3dsmax插件遇到的坑
- 阿里P6+Java研发工程师,到底牛在哪儿?真了
- 机器学习——DEAP数据集
- IOS-Touch ID的简单使用