animate,wow,Bootstrap,scrollReveal
Animate
1.简介
随着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 等
醉牛前端 , 收集前端常用的工具集合
2.Animate
1.简介
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。
官方演示
2.最简单的使用
1.下载Animate的框架
官网: https://daneden.github.io/animate.css/
github: https://github.com/daneden/animate.css
3.WOW
1.简介
官网:http://mynameismatthieu.com/WOW/
github: https://github.com/matthieua/WOW
1 核心作用:让页面滚动更有趣
通过WOW.js,可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说:当我们向下滚动页面时,可以省去很多判断条件,让CSS动画逐渐展示出来。
2 特点
轻量级类库, 不依赖jQuery,超简单的安装和使用,与animate.css配合,只需要短短几行代码就可以实现很多特效。容易定制,我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。
3 兼容性考虑
因为,WOW要和Animate配合使用,所有其也只兼容支持CSS3 animate属性的浏览器:IE10+、Firefox、Chrome、Opera、Safari。
2.最简单的使用
1.引入WOW和Animate
2.在布局中使用wow和animate
1.基本的布局
2.布局添加样式
3.JavaScript中进行初始化
3.WOW滚动案例
1.修改布局
执行效果:
2.修改item的动画
4.WOW的常用属性
data-wow-delay: 动画开始前延迟
data-wow-duration: 动画持续时长
data-wow-iteration: 动画重复次数
data-wow-offset: 浏览器底部到指定item的顶部的距离(偏移量)
来搞定它? 可以加入data-wow-duration(动画持续时间)和data-wow-delay(动画延迟时间)等属性。比如:
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s"></div> <div class="wow slideInRight" data-wow-iteration="5"></div>
data-wow-offset:用于决定当前的元素在滚动的时候 , 到达怎样的位置出现(是在滚动之前出现、滚动之后出现,还是滚动的时候出现)http://mynameismatthieu.com/WOW/
1.探究data-x-offset意思
1.图解
2.布局代码
3.js代码
5.WOW的默认配置参数
var wow = new WOW({boxClass: 'wow', // 动画元素的CSS类(默认类名wow)animateClass:'animated', // 动画CSS类 (默认类名animated)offset: 0, // 距离可视区域多少开始执行动画(默认为0)mobile: true, // 是否在移动设备上执行动画 (默认是true) });wow.init();
6.WOW存在的问题
WOW.js实例的动画只能加载一次,如果要重新执行动画必须要进行刷新。
但是在实际开发中,更多时候动画是只加载一次,否则会造成视觉错乱。那如果要多次重复展现动画该如何处理呢?
4.scrollReveal
1.简介
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。
官网:https://scrollrevealjs.org/
github: https://github.com/jlmakes/scrollreveal
2.最简单的使用方法
1.写基本布局
对应的代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{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;}</style> </head> <body><ul id="main"><li class="box">1</li><li class="box">2</li><li class="box">3</li>.........<li class="box">30</li> </ul> </script> </body> </html>
2.引入scrollReveal库
3.JavaScript中执行动画
3.常用的参数
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);
1.重复动画
2.动画的开始方向
4.回调函数am
5.scrollReveal 小练习
效果:
1.布局搭建
2.布局样式
4.布局添加动画
5.添加动画配置
1.实现重复动画
2.指定某个盒子进行动画
1.选中某个盒子
2.给某个盒子设计动画
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);}
结论:想给哪个标签执行动画,先拿到该标签,然后给标签开始动画
4.scrollReveal 和 WOW的区别和联系
它们都不依赖jQuery;
wow依赖于animate.css ,ScrollReveal不依赖任何其他插件或者库;
wow的释放动画,只能够实现一次,而ScrollReveal可以无限次使用;
ScrollReveal 参数相对比较多,比较复杂些;
实际工作中,用wow比较多。
5.Bootstrap
1.简介
1 什么是bootstrap?
bootstrap是当下最流行的前端框架(界面工具集);
特点是灵活简单、代码优雅、美观大方;
目的在于让web开发更加迅速、敏捷;
由Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的,并利用业余时间完成了第一个版本的开发。
2 什么是框架?
库 lib library
写的更少做的更多 提供一套较为便捷的操作方式;
将一套功能体系封装到一个单独的文件中的东西;
Bootstrap提供一套前端需要的界面工具集合。
3 为什么使用Bootstarp?
生态圈火,不断地更新迭代;
提供一套美观大方地界面组件;
响应式界面,移动设备优先;
让我们的 Web 开发更简单,更快捷
注意:
使用 Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式
Bootstrap 不是 BootStrap!这是一个词,不是合成词,其含义为:n. 引导指令,引导程序
官网 :http://www.bootcss.com/
github 地址: https://github.com/twbs/bootstrap
3.Bootstrap初体验
Boostrap 依赖 Jquery
1.项目集成BootStrap
2.最简单的使用
组件:button , button -group , input , progress , 字体图标
6.官网快速开发(Bootstrap 页面)
1新建项目
使用bootstrap 与 Jquery 框架技术 ;
其中boostrap 依赖 Jquery
2 BootStrap 页面的简单配置
1.配置 : 网页的宽等于设备的宽
2.初始化网页的缩放比例为 1
参考:
http://v3.bootcss.com/getting-started/#template
http://v3.bootcss.com/css/
3 实现导航条组件
bootstrap官网:http://v3.bootcss.com/
<!--导航条--> <nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">广州小码哥教育</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">简介 <span class="sr-only">(current)</span></a></li><li><a href="#">综述</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学院 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">IOS</a></li><li role="separator" class="divider"></li><li><a href="#">Java</a></li><li role="separator" class="divider"></li><li><a href="#">Android</a></li><li role="separator" class="divider"></li><li><a href="#">UI</a></li><li role="separator" class="divider"></li><li><a href="#">HTML5</a></li></ul></li><li><a href="#">关于</a></li><li><a href="#">社区</a></li><li><a href="#">服务</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav>
4设计导航条样式
添加
.navbar-fixed-top
类可以让导航条固定在浏览器的顶部注意:固定的导航条会遮住页面上的其他的内容,可给
<body>
设计padding
导航条包含一个
.container
或者.container-fluid
容器,从而让导航条居中显示或者自适应显示添加
.navbar-inverse
可以改变导航栏显示的背景颜色
5实现 轮播图 (js插件)和 样式
参考:http://v3.bootcss.com/javascript/#carousel
index.html实现头部轮播图:
<!--广告轮播图--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators 下面圆点 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides 中间滚动的内容 --><div class="carousel-inner" role="listbox"><div class="item active"><img src="data:image/nav_01.jpg" alt="..."><div class="carousel-caption">Hello Word !</div></div><div class="item"><img src="data:image/nav_02.jpg" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="data:image/nav_03.jpg" alt="..."><div class="carousel-caption"></div></div></div><!-- Controls 上一张 下一张--><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div>
index.css设计样式:
body{padding-top: 50px; }
6中间的栅栏布局(一)
参考:http://v3.bootcss.com/css/#grid
该布局代码:
<!--中间的栅栏布局--> <div id="main"><div class="container-fluid"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div></div> </div>
7中间栅栏布局(二)
1.每一个item布局的代码:
<!--中间的栅栏布局--> <div id="main"><div class="container-fluid"><div class="row"><div class="col-md-4"><img src="data:image/apple-logo.png" alt=""><h2>iOS学院</h2><p>iOS学院,又称大神学院,学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p><button>立即咨询</button></div><div class="col-md-4"><img src="data:image/android.png" alt=""><h2>Android学院</h2><p>Android学院,学院的每一个学生都很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p><button>立即咨询</button></div><div class="col-md-4"><img src="data:image/web.png" alt=""><h2>网页UI学院</h2><p>iOS学院,又称大神学院,学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p><button>立即咨询</button></div></div></div> </div>
2.第一张图片裁剪成圆形:
img 使用 class="img-circle" 样式
<!--中间的栅栏布局--> <div id="main"><div class="container-fluid"><div class="row"><div class="col-md-4"><img class="img-circle" src="data:image/apple-logo.png" alt="" >...</div>......</div></div> </div>
8中间栅栏布局样式
body{padding-top: 50px; }#main{padding: 20px; }/*图片大小*/ #main .container-fluid .row .col-md-4 img{width: 180px;} /*水平居中*/ #main .container-fluid .row .col-md-4{text-align: center;/*下边距*/margin-bottom: 20px; }/*字体样式*/ #main .container-fluid .row .col-md-4 p {/*字体对齐方式*/text-align: left;/*首行缩进*/text-indent: 8%; }
设计button的样式
9底部标签布局(js插件)
参考:http://v3.bootcss.com/javascript/#tabs
该布局代码:
<!--底部的tabBar--><div id="tabBar"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#iOS" aria-controls="home" role="tab" data-toggle="tab">iOS</a></li><li role="presentation"><a href="#Android" aria-controls="profile" role="tab" data-toggle="tab">Android</a></li><li role="presentation"><a href="#UI" aria-controls="messages" role="tab" data-toggle="tab">UI</a></li></ul><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="iOS">iOS</div><div role="tabpanel" class="tab-pane" id="Android">Android</div><div role="tabpanel" class="tab-pane" id="UI">UI</div></div></div>
10底部标签添栅栏布局
参考:http://v3.bootcss.com/css/#grid
该布局的代码:
<!--底部的tabBar--><div id="tabBar"><!-- Nav tabs -->.........<!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="iOS"><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div></div><div role="tabpanel" class="tab-pane" id="Android"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-8">.col-md-8</div></div></div><div role="tabpanel" class="tab-pane" id="UI"><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div></div></div></div>
11底部标签栅栏布局的完善
该布局对应的代码:
<!--底部的tabBar--><div id="tabBar"><!-- Nav tabs -->.........<!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="iOS"><div class="row"><div class="col-md-8"><h2>iOS学院 <span>史上最具逼格</span> </h2><p>iOS学院,又称大神学院,学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p></div><div class="col-md-4"><img src="data:image/safari-logo.jpg" alt=""></div></div></div><div role="tabpanel" class="tab-pane" id="Android"><div class="row"><div class="col-md-4"><img src="data:image/firefox-logo.jpg" alt=""></div><div class="col-md-8"><h2>Android学院 <span>史上最具逼格</span> </h2><p>Android学院,学院的每一个学生都很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p></div></div></div><div role="tabpanel" class="tab-pane" id="UI"><div class="row"><div class="col-md-8"><h2>网页UI学院<span>史上最具逼格</span> </h2><p>网页UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p></div><div class="col-md-4"><img src="data:image/ie-logo.jpg" alt=""></div></div></div></div></div>
12底部标签栅栏布局的样式
1.图片自适应大小:
2.设计字体样式
/*字体距离顶部*/ #tabBar .tab-content .tab-pane .row .col-md-8 {margin-top: 100px; } /*h2 字体颜色*/ #tabBar .tab-content .tab-pane .row .col-md-8 h2{color: red; }/*span 字体颜色和大小*/ #tabBar .tab-content .tab-pane .row .col-md-8 h2 span{color: purple;font-size: 20px;}
3.设计字体自适应大小
4.自适应布局
/*自适应布局*/ @media screen and (max-width: 650px) {/**字体距离顶部*/#tabBar .tab-content .tab-pane .row .col-md-8 {margin-top: 40px;} }
13尾部布局
<!--分解线--> <hr><!--尾部--> <footer><!--左浮动--><p class="pull-left">© 2015 广州小码哥教育集团</p><!--右浮动--><a class="pull-right" target="_top"> 回到顶部</a> </footer>
animate,wow,Bootstrap,scrollReveal相关推荐
- 【小河今学 | Bootstrap-v3+animate+wow】制作一个简单的响应式网站
7.29 今天的作业是响应式企业官网开发,包括nav.home.bbs.html5.BootStrap.course.app.contact.footer等9个部分. 本来应该昨天就做好的,拖延症犯了 ...
- bootstrap表单拖拽生成器插件_web前端常用插件、工具类库汇总,新手必收藏!!!...
前言 在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 下面这些是我在工作中积累的一些常用的前端 ...
- JS 流行库(七):WOW
JS 流行库(七):WOW WOW.js 是 Animate.css 的扩充,以让页面滚动更加有趣,在页面滚动的过程中逐渐释放动画效果,示例如下: WOW.js 首页; 即 WOW.js + Anim ...
- 9个前端动画库让你的交互更加性感
***上期入口:***9个用来爬取网络站点的Python库 1️⃣Animate.css CSS3 动画库,也是目前最通用的动画库. **官网:**https://daneden.github.io/ ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- HTML5+CSS大作业——明星相片个人网页设计(6页)学生网站模板
HTML5+CSS大作业--明星相片个人网页设计(6页) 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
- Ajax的简历技能如何写,web前端工程师简历专业技能怎么写
专业技能(案例一) javascript.css.node.js.vue.angluer.react 专业技能(案例二) JavaScript HTML5 Web前端 专业技能(案例三) ps.ai ...
- 常用的 JS库 总结
文章目录 zopto OwlCarousel swiper.js superslide moment.js qs.js wow.js ScrollReveal html2canvas zy.media ...
最新文章
- 查看windows下系统信息
- 【MyBatis使用】mapper.xml 中特殊符号的 2 种处理方法(CDATA区+替代字符举例)
- 自用开源/免费软件收集
- oracle11g和12c安装区别,Oracle下载与Oracle安装图解(Oracle19c,Oracle18c,Oracle12c,Oracle11g)...
- arduino 停止程序_极路由1S OpenWrt开机自启程序及串口调试
- Linux 下的 Docker 安装与使用
- 【C语言】全局变量、本地变量、静态本地变量(书写规范代码,正确定义变量,防止未知错误)
- GDAL的python版本安装使用
- 2015.7.9(1000股涨停,未按分段交易中国重工、中国软件减仓失误!补做大智慧、中色股份追高,而后控制仓位预防高开跳水——重新整理分段交易原则)发现中软吸筹率极高...
- java 车牌号 正则_正则验证车牌号码,包括新能源车牌
- UVA1386 Cellular Automaton
- 饺子播放器使用IJKPlayer播放MP4文件
- RS-485 工作逻辑
- CVPR 2022|解耦知识蒸馏!旷视提出DKD:让Hinton在7年前提出的方法重回SOTA行列!...
- 小学计算机京剧脸谱教案,[热门]《戏曲脸谱》小学美术教学案例
- 新版SpringCloudGateway网关 切面修改方法入参
- 北大数学天才出家12年后还俗引热议,当年放弃MIT全奖,如今主动降薪1万
- dell电脑java下载_【亲测不管用】【DELL安装系统的坑】亲测UEFI启动模式的电脑安装Win10和Ubuntu双系统(dell笔记本和hp笔记本)...
- Mockman-Mock服务工具的安装与使用以及mock的一些扩展
- arcgis Card Conversion Tools(数据转换工具介绍)
热门文章
- Appium连接Genymotion模拟器出现Could not find a connected Android device错误的解决办法
- java实现oss文件存储
- 开源纯粹主义:每一颗螺丝钉都是自由的
- 挂起计算机重新启动,SSMS 安装失败 挂起的重启正在阻止完成安装过程。请重启计算机并再次运行安装程序。...
- 知识图谱可视化——《间客》人物关系
- 语法高亮不够漂亮?这里有你想要的 Rouge 主题
- Day04:编程中的“真”“假”?
- 发布gridgame游戏包
- 使用reload()重新加载模块
- 自然语言语义分析研究进展_笔记