animate,wow,Bootstrap,scrollReveal

最新推荐文章于 2024-08-20 08:39:53 发布

低_调_哥

最新推荐文章于 2024-08-20 08:39:53 发布

阅读量3k

点赞数

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="image/nav_01.jpg" alt="...">
            <div class="carousel-caption">
                Hello Word !
            </div>
        </div>
        <div class="item">
            <img src="image/nav_02.jpg" alt="...">
            <div class="carousel-caption">
    
            </div>
        </div>
        <div class="item">
            <img src="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="image/apple-logo.png" alt="">
                <h2>iOS学院</h2>
                <p>iOS学院,又称大神学院,学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
                <button>立即咨询</button>
            </div>
            <div class="col-md-4">
                <img src="image/android.png" alt="">
                <h2>Android学院</h2>
                <p>Android学院,学院的每一个学生都很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p>
                <button>立即咨询</button>
            </div>
            <div class="col-md-4">
                <img src="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="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="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="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="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>