作为程序员一定要保持良好的睡眠，才能好编程

  2. 首页
  3. Javascript

javascript 以及css3 动画混合使用

发布时间：2017-12-31

我们常见的动画有哪些？

fullpage


wow 专门的一个动画 设计框架

如何使用呢？

我这里放一些教程：



在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等



html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WOW.js演示-oppo官网首页_dowebok</title>
<link rel="stylesheet" href="http://cdn.dowebok.com/98/css/animate.min.css">
<style>
* { margin: 0; padding: 0;}
body { overflow-x: hidden;}
.dowebok .hd { height: 125px; background: url(http://cdn.dowebok.com/131/images/i2/hd.png) 50% 0 no-repeat;}
.dowebok .slide { height: 622px; background: url(http://cdn.dowebok.com/131/images/i2/slide.jpg) 50% 0 no-repeat;}
.dowebok .area1 { background-color: #f2f2f2;}
.dowebok .area1 h2 { height: 130px; background: url(http://cdn.dowebok.com/131/images/i2/h2-1.png) 50% 0 no-repeat;}
.dowebok .area1 .box { padding: 35px 0 60px;}
.dowebok .area1 .bg1 { width: 1180px; height: 565px; margin: 0 auto; background: url(http://cdn.dowebok.com/131/images/i2/bg1.jpg) 0 0 no-repeat;}

.dowebok .area2 { padding-bottom: 50px; border-bottom: 3px solid #d9d9d9; background-color: #f6f6f6;}
.dowebok .area2 h2 { height: 140px; background: url(http://cdn.dowebok.com/131/images/i2/h2-2.png) 50% 0 no-repeat;}
.dowebok .area2 .list1 { position: relative; width: 1180px; height: 880px; margin: 0 auto; list-style-type: none;}
.dowebok .list1 .item { position: absolute;}
.dowebok .list1 .item1 { left: 0; top: 0; width: 280px; height: 580px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-1.jpg);}
.dowebok .list1 .item2 { left: 300px; top: 0; width: 280px; height: 280px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-2.jpg);}
.dowebok .list1 .item3 { left: 300px; top: 300px; width: 280px; height: 280px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-3.jpg);}
.dowebok .list1 .item4 { left: 0; bottom: 0; width: 580px; height: 280px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-4.jpg);}
.dowebok .list1 .item5 { left: 600px; top: 0; width: 580px; height: 280px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-5.jpg);}
.dowebok .list1 .item6 { left: 600px; top: 300px; width: 280px; height: 580px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-6.jpg);}
.dowebok .list1 .item7 { right: 0; top: 300px; width: 280px; height: 280px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-7.jpg);}
.dowebok .list1 .item8 { right: 0; bottom: 0; width: 280px; height: 280px; background-image: url(http://cdn.dowebok.com/131/images/i2/list1-8.jpg);}

.dowebok .area3 { padding-bottom: 60px; background-color: #eaeaea;}
.dowebok .area3 h2 { height: 130px; background: url(http://cdn.dowebok.com/131/images/i2/h2-3.png) 50% 0 no-repeat;}
.dowebok .area3 .list2 { position: relative; width: 1180px; height: 560px; margin: 0 auto; list-style-type: none;}
.dowebok .list2 .item { position: absolute; width: 380px; height: 270px;}
.dowebok .list2 .item1 { left: 0; top: 0; background-image: url(http://cdn.dowebok.com/131/images/i2/list2-1.jpg);}
.dowebok .list2 .item2 { left: 400px; top: 0; background-image: url(http://cdn.dowebok.com/131/images/i2/list2-2.jpg);}
.dowebok .list2 .item3 { left: 0; bottom: 0; background-image: url(http://cdn.dowebok.com/131/images/i2/list2-3.jpg);}
.dowebok .list2 .item4 { left: 400px; bottom: 0; background-image: url(http://cdn.dowebok.com/131/images/i2/list2-4.jpg);}
.dowebok .list2 .item5 { height: 560px; right: 0; top: 0; background-image: url(http://cdn.dowebok.com/131/images/i2/list2-5.jpg);}

.dowebok .ft-service { width: 1180px; height: 125px; margin: 0 auto; list-style-type: none; font-size: 0; overflow: hidden;}
.dowebok .ft-service .item { display: inline-block; width: 236px; height: 125px; background-image: url(http://cdn.dowebok.com/131/images/i2/ft-service.png); background-repeat: no-repeat; *display: inline; zoom: 1;}
.dowebok .ft-service .item2 { background-position: -236px 0;}
.dowebok .ft-service .item3 { background-position: -472px 0;}
.dowebok .ft-service .item4 { background-position: -708px 0;}
.dowebok .ft-service .item5 { background-position: right 0;}
.dowebok .ft-links { height: 316px; background: url(http://cdn.dowebok.com/131/images/i2/ft-links.png) 50% 0 no-repeat;}
</style>
</head>

<body>
<div>
    <div></div>
    <div>
        <div></div>
        <div>
            <h2></h2>
            <div>
                <div class="bg1 wow fadeInUp"></div>
            </div>
        </div>

        <div>
            <h2></h2>
            <ul>
                <li class="item item1 wow bounceInLeft"></li>
                <li class="item item2 wow bounceInLeft"></li>
                <li class="item item3 wow bounceInLeft"></li>
                <li class="item item4 wow bounceInLeft"></li>
                <li class="item item5 wow bounceInRight"></li>
                <li class="item item6 wow bounceInRight"></li>
                <li class="item item7 wow bounceInRight"></li>
                <li class="item item8 wow bounceInRight"></li>
            </ul>
        </div>

        <div>
            <h2></h2>
            <ul>
                <li class="item item1 wow bounceInLeft"></li>
                <li class="item item2 wow bounceInLeft"></li>
                <li class="item item3 wow bounceInLeft"></li>
                <li class="item item4 wow bounceInLeft"></li>
                <li class="item item5 wow bounceInRight"></li>
            </ul>
        </div>
    </div>
    <div>
        <ul>
            <li class="item item1 wow fadeInUpBig"></li>
            <li class="item item2 wow fadeInUpBig" data-wow-delay="0.3s"></li>
            <li class="item item3 wow fadeInUpBig" data-wow-delay="0.6s"></li>
            <li class="item item4 wow fadeInUpBig" data-wow-delay="0.9s"></li>
            <li class="item item5 wow fadeInUpBig" data-wow-delay="1.2s"></li>
        </ul>
        <div></div>
    </div>
</div>

<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
<script>
/*if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};*/
</script>

</body>
</html>

演示地址：http://www.dowebok.com/demo/131/index2.html


这个的实现原理是什么呢？


1、首先使用css样式定义好普通的页面

2、引入animate.css动画库

https://daneden.github.io/animate.css/   这是动画效果

<link rel="stylesheet" href="http://cdn.dowebok.com/98/css/animate.min.css">

3、html代码的编写方法：

 在class类中加入  wow  fadeInUpBig(动画名) 

<div>
        <ul>
            <li class="item item1 wow fadeInUpBig"></li>
            <li class="item item2 wow fadeInUpBig" data-wow-delay="0.3s"></li>
            <li class="item item3 wow fadeInUpBig" data-wow-delay="0.6s"></li>
            <li class="item item4 wow fadeInUpBig" data-wow-delay="0.9s"></li>
            <li class="item item5 wow fadeInUpBig" data-wow-delay="1.2s"></li>
        </ul>
<div>

4、引入wow或wow.min.js 不需要引入jquery

<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>

5、在页面底部加上

<script>
/*if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};*/
</script>

通过上面的5步已经实现了最简单的动画。


再来看看wow的一些参数：

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

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。

后面的data-wow-duration（动画持 续时间）、

data-wow-delay（动画延迟时间）、

data-wow-offset（元素的位置露出后距离底部多少像素执行）

data- wow-iteration（动画执行次数）这四个属性可选可不选。


demo:


http://www.dowebok.com/demo/2014/78/#page3


fullpage.js

http://www.dowebok.com/demo/2014/77/



wow.js 初始化：

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();


属性/方法        类型    默认值            说明
boxClass        字符串    ‘wow’            ‘wow’需要执行动画的元素的 class
animateClass    字符串    ‘animated’        ‘animated’animation.css 动画的 class
offset            整数    0                距离可视区域多少开始执行动画
mobile            布尔值    true            是否在移动设备上执行动画
live            布尔值    true            异步加载的内容是否有效



更多>> Javascript