WOW.js 使用教程
官网加动画特效，哇哦，下面我介绍一下WOW.js
官网地址：https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者animate.min.css
wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。
在body底部引入wow.js 且初始化一下：
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
如果需要自定义配置，可如下使用：
var wow = new WOW({
boxClass: ‘wow‘,
animateClass: ‘animated‘,
offset: 0,
mobile: true,
live: true
});
wow.init();配置
属性/方法 类型 默认值 说明 boxClass 字符串 ‘wow’ 需要执行动画的元素的 class animateClass 字符串 ‘animated’ animation.css 动画的 class offset 整数 0 距离可视区域多少开始执行动画 mobile 布尔值 true 是否在移动设备上执行动画 live 布尔值 true 异步加载的内容是否有效 注意new WOW().init();中的WOW要大写，否则就没效果了。
1、在css下方js上方写需要动画的元素（必须设置为块状或者行内块状！必须设置为块状或者行内块状！必须设置为块状或者行内块状！），并添加class类名。
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。
<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration："1"></div>
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）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 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 2、其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。
有的网站采用全屏滚动的fullpage插件与wow相结合的方法，实现的效果比较酷炫。我们完全可以仿写。
但是使用fullpage.js下wow.js无效失效没动作
问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下
$(‘#fullpage‘).fullpage({
scrollBar:true；
});
最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下
html{overflow:hidden;
}
自己写的html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用wow做的项目</title>
<link rel="stylesheet" href="css/animate.css">
<style>
.container{
width:800px;
margin:0 auto;
}
.container ul{
display:flex;
display:-webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container ul li{
width:300px;
height:300px;
margin-bottom:40px;
list-style:none;
border-radius:50%;
text-align:center;
vertical-align:middle;
align-items: center;
line-height:300px;
background-color:pink;
}
.container ul li:nth-child(4n){
background-color:#409EFF;
}
.container ul li:nth-child(4n+1){
background-color:#67C23A;
}
.container ul li:nth-child(4n+2){
background-color:#E6A23C;
}
</style>
</head>
<body>
<section class="container">
<ul>
<li class="wow bounceInLeft">啊啊啊</li>
<li class="wow bounceInRight"></li>
<li class="wow bounceIn"></li>
<li class="wow bounceInUp"></li>
<li class="wow bounceInDown"></li>
<li class="wow slideInUp"></li>
<li class="wow slideInDown"></li>
<li class="wow slideInLeft"></li>
<li class="wow slideInRight"></li>
<li class="wow lightSpeedIn"></li>
<li class="wow pulse"></li>
<li class="wow flipInX">哦哦哦</li>
<li class="wow flipInY"></li>
<li class="wow bounce"></li>
<li class="wow shake"></li>
<li class="wow wobble"></li>
<li class="wow rollIn"></li>
<li class="wow fadeInUpBig" data-wow-delay="0.3s"></li>
<li class="wow fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li>
<li class="wow fadeInUpBig" data-wow-delay="0.9s"></li>
<li class="wow fadeInUpBig" data-wow-delay="1.2s"></li>
<li class="wow fadeInUpBig" data-wow-delay="1.5s"></li>
</ul>
</section>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
WOW.js 使用教程的更多相关文章
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- css3特效插件wow.js
在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/in ...
- 网页延迟加载动画的实现-WOW.js
网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差 一开始觉得好难好复杂好高大上,直到我发现 wow.js …… 首先是演示地址:https://www.delac.io/wow/ 嗯,狗子确实很 ...
- WOW.js——在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- 如何解决wow.js与fullpage的兼容性
项目需要做到全屏显示的同时还需要做到实时执行动画.但是发现在使用fullpage之后,wow.js(不知道这个是啥的点击这里)不起作用. 找了诸多资料,解决方法如下: $('#fullpage').f ...
- 24个很赞的 Node.js 免费教程和在线指南
JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...
- wow.js使用方法
近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址 使用方法真是超简 ...
随机推荐
- Python：基于MD5的文件监听程序
前述 写了一个基于MD5算法的文件监听程序,通过不同的文件能够生成不同的哈希函数,来实现实现判断文件夹中的文件的增加.修改.删除和过滤含有特定字符的文件名的文件. 需求说明 需要实现对一个文件夹下的文 ...
- 真win10官方原版ISO下载方法
最近装新机器,计划装个双系统,但是新硬件用不了Win7,只好改装Win10.经过数遍尝试,发现网上很多打着官方原版旗号的ISO以及各种装机软件,或多或少都捆绑了一些"流氓"软件,这 ...
- Hive使用必知必会系列
一.Hive的几种数据模型 内部表 (Table 将数据保存到Hive 自己的数据仓库目录中:/usr/hive/warehouse) 外部表 (External Table 相对于内部表,数据不在自 ...
- asp.net core系列 29 EF模型配置(查询类型,关系数据库建模)
一.查询类型 此功能是EF Core 2.1中的新功能. EF Core除了实体类型之外,EF Core模型还可以包含查询类型,这些查询类型是针对“未映射到实体类型”的数据获取.比如视图,或只读数据表 ...
- My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间
在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...
- 第12章 X.509证书库的Fluent API - IdentityModel 中文文档(v1.0.0)
存储X.509证书的常见位置是Windows X.509证书存储区.商店的原始API有点神秘(在.NET Framework和.NET Core之间也略有变化). X509类是一个简化的API从所述存 ...
- 搭建基于SornaQube的自动化安全代码检测平台
一.背景和目的 近年来,随着新业务.新技术的快速发展,应用软件安全缺陷层出不穷.虽然一般情况下,开发者基本都会有单元测试.每日构建.功能测试等环节来保证应用的可用性.但在安全缺陷方面,缺乏安全意识.技 ...
- 关于css兼容性问题及一些常见问题汇总
目前主流浏览器的兼容性做的都比较好了,本文主要针对IE6,7的不兼容问题进行解决. 1.圆盘时钟有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度. ...
- 如何让用户登录Dynamics 365 Customer Engagement后自动登录到Unified Interface App?
微软动态CRM专家罗勇 ,回复324或者20190422可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...
- python线程（二）代码部分
使用threading创建线程: from threading import Thread def work(name): print(f"我是线程{name}") if __na ...