animate inater插件_bootstrap 动态效果WOW animate插件

随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有：UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，还有很多常用的动画库、字体图标，比如：Animate、Wow、Iconfont、Iconmoon等。

这些前端框架典型的特点：简单易用、相通性强，我们可以在学习一个框架后快速上手其他框架。

主要知识点：Animate、WOW.js、 scrollReveal.js、Zepto.js、Bootstrap、 jQuery 等

1.Animate

Animate.css是一个css动画样式库，其目标是让CSS动画像喝水一样容易(Just-add-water CSS Animation)。

animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库)

animate.css是一个来自国外的CSS3动画库，它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn \/ rotateOut)、淡入淡出(fadeIn \/ fadeOut)等多达70多种动画特效，几乎包含了所有常见的动画特效。

重点：浏览器兼容，animate.css底层是通过css3实现的，当然是只兼容支持CSS3 animate属性的浏览器： IE10+、Firefox、Chrome、Opera、Safari

1.wow

1 核心作用：让页面滚动更有趣

通过WOW.js，可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

2 特点

轻量级类库， 不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。

3 兼容性考虑

因为，WOW要和Animate配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

A.WOW的常用属性

data-wow-delay: 动画开始前延迟

data-wow-duration: 动画持续时长

data-wow-iteration: 动画重复次数

data-wow-offset: 浏览器底部到指定item的顶部的距离(偏移量)

来搞定它? 可以加入data-wow-duration(动画持续时间)和data-wow-delay(动画延迟时间)等属性。比如：

data-wow-offset：用于决定当前的元素在滚动的时候 , 到达怎样的位置出现(是在滚动之前出现、滚动之后出现，还是滚动的时候出现)http://mynameismatthieu.com/WOW/

B.WOW的默认配置参数

var wow = new WOW({

boxClass: 'wow', // 动画元素的CSS类(默认类名wow)

animateClass:'animated', // 动画CSS类 (默认类名animated)

offset: 0, // 距离可视区域多少开始执行动画(默认为0)

mobile: true, // 是否在移动设备上执行动画 (默认是true)

});

wow.init();

WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。

3.scrollReveal

scrollReveal是一个兼容PC端和移动设备的滚动-动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；

1.特点

scrollReveal同时兼容PC端和移动端；

0依赖(不依赖于jQuery，也不依赖于animate.css);

定制性高，使用简单方便快捷。

2.浏览器兼容

虽然scrollReveal.js不依赖于animate.css，但是它的动画也是用CSS3创建的，所以依然需要支持HTML5和CSS3比较好的浏览器，比如：IE10+、Firefox、Chrome、Opera、Safari。

对应的代码

Title

*{

margin: 0;

padding: 0;

}

#main {

width: 800px;

margin: 20px auto;

/*background-color: skyblue;*/

list-style: none;

}

#main .box{

width: 200px;

height: 300px;

background-color: skyblue;

float: left;

margin: 10px;

display: flex;

justify-content: center;

align-items: center;

}

• 1
• 2
• 3

.........

30

常用的参数

var config = {

reset: false, // 滚动鼠标时，动画开关(如果为true, 动画可以执行n次)

origin: 'bottom', // 动画开始的方向

duration: 500, // 动画持续时间

delay: 0, // 延迟

rotate: {x:0, y:0, z:0}, // 过度到0的初始角度

opacity: 0, // 初始透明度

scale: 0.9, //缩放

easing: 'cubic-bezier(0.1, 0.2, 0.3, 0.4)', // 动画效果'ease', 'ease-in-out'，'linear'...

// 回调函数

//动画开始前调用

beforeReveal: function(domEl){},

//滚动鼠标之前调用

beforeReset: function(domEl){},

//动画开始后调用

afterReveal: function(domEl){},

//滚动鼠标之后调用

afterReset: function(domEl){}

};

window.sr = ScrollReveal();

sr.reveal('.sr', config);

给某个盒子设计动画

window.οnlοad=function () {

var config = {

reset: true,

// rotate: {x:50, y:70, z:50}, // 过度到0的初始角度

};

var config1 = {

reset: true,

rotate: {x:0, y:0, z:90}, // 过度到0的初始角度

scale: 2,

duration: 1500, // 动画持续时间

};

//1.拿到ScrollReveal对象

window.sr= ScrollReveal();

//2.开始动画

sr.reveal('.box',config);

//3.开始动画

sr.reveal('#test12',config1);

}