Wow.js学习笔记

Wow.js学习笔记

前期准备

注意：通过引入cdn的树懒，注意版本问题（小白我就是因为失败就去乖乖下载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>

初始化 wow 实例

• 方式一： 在引入wow.js 底部紧接着书写 script标签初始化wow实例

 <script>
　　new WOW().init();
</script>

• 方式二 ：在外部 JavaScript文件中书写页面加载事件完成时初始化 wow 实例

	document.ready = function(){
		new WOW().init()
	}

• 自定义配置 wow 实例

	var wow = new WOW({
	    boxClass: ‘wow‘, // 需要执行动画的元素的 class; 【String类型】默认值：‘wow’；
    	animateClass: ‘animated‘, // animation.css 动画的 class; 【String类型】默认值：‘animated’；
    	offset: 0, // 距离可视区域多少开始执行动画；【整数Number类型】默认值：0；
    	mobile: true, // 是否在移动设备上执行动画；【Boolean类型】默认值: true;
    	live: true // 异步加载的内容是否有效；【Boolean类型】默认值: true;
	});
	wow.init();

DOM添加 wow.js动画效果

• wow.js只针对 block块状或者inline-block行内块状的DOM添加动画效果才生效

	<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

• wow通用类名是每一个带动画的dom元素都要首加的（类似 animate.css），slideInLeft就是说明动画样式
  1、data-wow-duration：更改动画持续时间
  2、data-wow-delay：动画开始前的延迟
  3、data-wow-iteration：动画的次数重复（无限次：infinite）
  4、data-wow-offset：开始动画的距离（与浏览器底部相关）

  data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置

注意： 此四个DOM中的属性可选填

wow.js 动画样式常用class类名

• 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

原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

【参考链接】WOW.js 使用教程

小白谢幕

因为近期制作项目二期完成后，准备制作宣传系统的宣传网页。将主要应用jQuery相关插件和bootstrap进行实。有疑问也欢迎对线，(●’◡’●)