框架实战主要学习内容
-
animate.css 框架
-
wow.js 框架
-
scrollReveal.js 框架
-
BootStrap 框架
-
BootStrap 为学习重点
animate.css 框架
- 通过添加类名操作标签
特点：简单实用，添加的类名必须第一个类名为 "animated"，后面接所需特效的关键字名，动画特效只能执行一次
<div class = 'animated bounce'>
</div>
- 一些常用的特效（flash\bounce\fade）
- 刷新页面的方法
window.location.reload();
- 因为这个框架的动画只能执行一次，所以在当次动画执行之后进行回调或者启动定时器进行刷新页面的操作达到多次执行动画的目的。
- 此框架是基于 css3 实现的
wow.js 框架
- wow.js 框架是搭配 animate.css 使用的
- wow.js 是基于 js 实现的
-使用方法
<div class='wow slideInLeft'></div>
new WOW().init();
- 此框架有一些配置信息支持自定义属性
var wow = new WOW{
boxClass:'wow',
animateClass:'animated',
offset:0,
mobile:true, //是否支持移动端
live:true,
callBack:function(box){
}
}
- 此框架也有行内样式
<div class='wow slideInLeft' data-wow-duration='2s' data-wow-delay='5s' data-wow-offset='10' data-wow-iteration='10'></div>
- data-wow-duration: 特效持续事件
- data-wow-delay: 特效延迟时间
- data-wow-offset:滚动多少开始执行动画特效
data-wow-offset = 滚动距离 + 浏览器高度 - 控件上部到页面上部的距离
scrollReveal.js 框架
- 用法
<div class = 'foo'>foo</div>
<div class = 'bar'>bar</div>
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
- scrollReveal.js 的一些配置信息
sr.reveal('.foo',{
reset:true, //向上滚动也有特效，默认是 false，为没有特效
orgin:bottom, //动画出现起始位置
distance:20px,
duration:500,
delay:0,
rotate:{x:0,y:0,z:0},
scale:0,
// Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
mobile: true, //是否支持移动端
})
window.sr = ScrollReveal();
//添加配置
var config = {
//滚动鼠标时，动画开关
reset:true
};
//给小男孩单独设置动画
var config1 = {
reset:true,
origin:'left',
duration:1000,
delay:0,
rotate:{x:20,y:50,z:80},
opacity:0.2,
scale:2
};
//调用方法
sr.reveal('.imgSrc',config);
sr.reveal('.man',config1);
- scrollReveal 帧动画
//多用一个参数
window.sr = ScrollReveal({duration:2000});
sr.reveal('.box',30);
bootStrap 框架的使用
- 初体验缩减版
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
<meta charset = "utf-8">
<title>bootStrap 初体验</title>
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
<h1>hello world</h1>
</body>
</html>
- bootstrap 所包含的文件
//css 文件
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
//js 文件
bootstrap.js
bootstrap.min.js
npm.js
//fonts 字体文件
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
网友评论