案例十四、css3和fullpage实现全屏滚动

首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。
总共有四屏的内容

当鼠标每次上下滑动时就会一整屏的切换。

第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。

这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。
第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。
第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。
第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。

第一步：下载好jquery和fullpage插件，fullpage中包含css和js并引入。

<script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script>    <link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css">    <script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>

第二步：用html建立好元素：

<div class = "main">    <div class="section page1">        <img src="./images/page1.png">    </div>    <div class="section page2">        <div class = "list">            <img src = "./images/page2_1.png">            <img src = "./images/page2_2.png">            <img src = "./images/page2_3.png">        </div>            <img class = "text" src = "./images/page2_4.png">            <img  class = "bg" src = "./images/page2_5.png">    </div>     <div class="section page3">        <div class = "list">            <img src = "./images/page3_1.png">            <img src = "./images/page3_2.png">            <img src = "./images/page3_3.png">        </div>        <img class = "text" src = "./images/page3_4.png">            <img  class = "bg" src = "./images/page3_5.png">    </div>       <div class="section page4">        <div class = "list">            <img src = "./images/page4_1.png">            <img src = "./images/page4_2.png">            <img src = "./images/page4_3.png">        </div>            <img class = "text" src = "./images/page4_4.png">            <img  class = "bg" src = "./images/page4_5.png">    </div></div> <div id = "audioBox">        <audio id = "audio" autoplay loop  src= "./music/music.mp3"></audio>    </div>

包含了四屏的内容和一个audio元素，用于播放音乐。

第三步：利用fullpage的js实现每一屏的背景颜色 ，并使用js实现音乐的暂停播放

//1.fullpage，由于有四屏，其颜色也一样        $(".main").fullpage({sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b']        });        //2.控制音频的播放        var audioBox = document.getElementById('audioBox');        var audio = document.getElementById("audio");        audioBox.onclick = function(){        if(audio.paused){            audio.play();        }        else        {            audio.pause();        }    }

第四步：利用css进行布局：

<style type="text/css">    *{        margin: 0;        padding:0;    }  //设置背景音乐的图标    #audioBox{        width: 45px;        height: 45px;        position: absolute;        background: url(./images/music_on.png) no-repeat center;        border-radius: 22px;        top: 5%;        right: 3%;        cursor: pointer;    }    //让每屏超出的都自动隐藏    .section{        overflow: hidden;    }    /*设置第一屏的图片，因为第一屏也只有一个图片*/    .page1 img{        width: 50%;        margin-left: 30%;    } /*从第二屏开始都包含一个class=list的元素块，设置其距离左侧的距离*/    [class *= "page"] .list{        margin-left: 5%;    } /*让左边的图片的宽度都为240px*/    [class *= "page"] .list img{        width: 240px;    }    /*利用属性选择器，选出所有页的背景图片*/    [class *= "page"] .bg{        position: absolute;        bottom: 5%;        right: 5%;        width: 30%;    }    /*利用属性选择器，选择出所有页的文字图片*/    [class *= "page"] .text{        position: absolute;        top: 10%;        right: 5%;    }

通过第四步之后基本效果就已经完成了，但最后一点就是还没有给四屏的图片实现动画效果。

第五步、实现动画效果。
1.怎样判断当前滚动到了哪一屏？
因为fullpage会给当前页加一个active的class，所以利用class就可以判断处于当前页的时候触发动画。
2.实现第一屏的动画
第一屏主要是图片的淡入效果。
思路:通过改变opacity属性，结合transition来改变透明度，实现淡入的效果；

.page1 img{        opacity: 0;   /*初始状态为全透明*/        /*加上供应商前缀，持续时间为1.5s*/        -moz-transition: opacity 1.5s;        -webkit-transition: opacity 1.5s;    }/*当第一页显示的时候触发,当第一页时就会自动加上active类*/    .page1.active img{        opacity: 1;    }

3.实现第二屏的动画：
第二屏的动画，就是左侧的三个图片在页面显示时，从下到上依次滑进窗口。
核心思路 ：使用transform:translateY 和transition配合实现;
transition是检测属性值变化
translateY平移

/*动画的完成时间为1s，初始位置三个图片都处于向下移动到1000像素，即移出屏幕外。*/    .page2 .list img{        transition:1s;        transform: translateY(1000px);    } /*当第二屏触发时，图片回到原始位置*/    .page2.active .list img{        transform:translateY(0px);    }/*利用结构化伪类找到每一个图片并设置延时，为了使动画更灵活*/    .page2 .list img:nth-child(1){        transition-delay: 0.5s;    }    .page2 .list img:nth-child(2){        transition-delay: 0.8s;    }    .page2 .list img:nth-child(3){        transition-delay: 1s;    }

4.实现第三屏的动画
有了translateY那么第三屏是向左右移动，必然会有translateX控制水平方向。首先初始状态让三张图片都重叠在最左侧，当触发动画时依次铺开，仿照第二屏的例子，很容易写出来‘
.page .list img{
/设置动画持续时间为1s，动画开始时延迟0.5s/
transition: 1s 0.5s;
}

由于本屏的两个图片初始状态的位置都要叠加在最左侧的图片上，所以对于这两个图片分别设置它们的translateX

.page .list img:nth-child(2){
/向左移动了250px刚好与第一个重叠/
transform:translateX(-250px);
}

.page .list img:nth-child(3){
/向左移动了500px刚好与第一个重叠/
transform:translateX(-500px);
}

/设置触发时的动画，让所有的img归位/
.page3.active .list img{
transform:translateX(0px);
}

5.设置第五屏的动画。
第五屏的动画就是左侧的三个图片先重叠在中间的图片上，触发后归位。
①.依照上面的思想利用tanslateX可以实现；

.page4 .list img{        transition: 1s 0.5s;    }    /*设置第一个和第三个的初始位置处于中间的位置上*/    .page4 .list img:nth-child(1){        transform:translateX(250px);    }    .page4 .list img:nth-child(3){        transform:translateX(-250px);    }  /*触发时归位*/    .page4.active .list img{        transform:translateX(0px);    }

②.除了css3的transition和transform属性，还可以利用css3的动画：keyframes

.page4.active .list img:nth-child(1){        transform:translateX(0px);        -webkit-animation: 'flymove1' 1s ease-in 1;    /*动画名、持续时间、更细粒度动画，重复次数*/    }    .page4.active .list img:nth-child(3){        transform:translateX(0px);        -webkit-animation: 'flymove2' 1s ease-in 1;    }     @-webkit-keyframes flymove1{        0%{ transform: translateX(250px);}        100%{ transform: translateX(0px);}     }     @-webkit-keyframes flymove2{        from{ transform: translateX(-250px);}        to{ transform: translateX(0px);}     }

关于keyframes的参数的了解，可以查一下手册，熟悉一下就可以了。

通过上面的代码，一个炫酷的全屏滚动页面就完成了！

附上源代码：

<!DOCTYPE html><html><head><meta charset = "utf-8" />    <title>fullpage 实现全屏滚动</title>    <script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script>    <link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css">    <script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>    <style type="text/css">    *{        margin: 0;        padding:0;    }    #audioBox{        width: 45px;        height: 45px;        position: absolute;        background: url(./images/music_on.png) no-repeat center;        border-radius: 22px;        top: 5%;        right: 3%;        cursor: pointer;    }    .section{        overflow: hidden;    }    /*设置第一屏的图片*/    .page1 img{        width: 50%;        margin-left: 30%;    }    [class *= "page"] .list{        margin-left: 5%;    }    [class *= "page"] .list img{        width: 240px;    }    /*所有页的背景图片*/    [class *= "page"] .bg{        position: absolute;        bottom: 5%;        right: 5%;        width: 30%;    }    /*所有页的文字图片*/    [class *= "page"] .text{        position: absolute;        top: 10%;        right: 5%;    }    /*第一屏图片的动画      思路:通过改变opacity属性，结合transition来改变透明度，实现淡入的效果;    */    .page1 img{        opacity: 0;/*初始状态为全透明*/        -moz-transition: opacity 1.5s;        -webkit-transition: opacity 1.5s;    }    /*当第一页显示的时候触发*/    .page1.active img{        opacity: 1;    }    /*第二页的动画    核心思路 ：使用transform:translateY 和transition配合实现;    transition是检测属性值变化    translateY平移    */    .page2 .list img{        transition:1s;        transform: translateY(1000px);    }    .page2.active .list img{        transform:translateY(0px);    }    .page2 .list img:nth-child(1){        transition-delay: 0.5s;    }    .page2 .list img:nth-child(2){        transition-delay: 0.8s;    }    .page2 .list img:nth-child(3){        transition-delay: 1s;    }   /*设置第三页的动画*/    .page3 .list img{        transition: 1s 0.5s;    }    .page3 .list img:nth-child(2){        transform:translateX(-250px);    }    .page3 .list img:nth-child(3){        transform:translateX(-500px);    }    .page3.active .list img{        transform:translateX(0px);    }   /*设置第四页的动画*/    /*.page4 .list img{        transition: 1s 0.5s;    }    .page4 .list img:nth-child(1){        transform:translateX(250px);    }    .page4 .list img:nth-child(3){        transform:translateX(-250px);    }    .page4.active .list img{        transform:translateX(0px);    }*/    .page4.active .list img:nth-child(1){        transform:translateX(0px);        -webkit-animation: 'flymove1' 1s ease-in 1; /*动画名、持续时间、更细粒度动画，重复次数*/    }    .page4.active .list img:nth-child(3){        transform:translateX(0px);        -webkit-animation: 'flymove2' 1s ease-in 1;    }     @-webkit-keyframes flymove1{        0%{ transform: translateX(250px);}        100%{ transform: translateX(0px);}     }     @-webkit-keyframes flymove2{        from{ transform: translateX(-250px);}        to{ transform: translateX(0px);}     }    </style></head><body><div class = "main">    <div class="section page1">        <img src="./images/page1.png">    </div>    <div class="section page2">        <div class = "list">            <img src = "./images/page2_1.png">            <img src = "./images/page2_2.png">            <img src = "./images/page2_3.png">        </div>            <img class = "text" src = "./images/page2_4.png">            <img  class = "bg" src = "./images/page2_5.png">    </div>     <div class="section page3">        <div class = "list">            <img src = "./images/page3_1.png">            <img src = "./images/page3_2.png">            <img src = "./images/page3_3.png">        </div>        <img class = "text" src = "./images/page3_4.png">            <img  class = "bg" src = "./images/page3_5.png">    </div>       <div class="section page4">        <div class = "list">            <img src = "./images/page4_1.png">            <img src = "./images/page4_2.png">            <img src = "./images/page4_3.png">        </div>            <img class = "text" src = "./images/page4_4.png">            <img  class = "bg" src = "./images/page4_5.png">    </div></div> <div id = "audioBox">        <audio id = "audio" autoplay loop  src= "./music/music.mp3"></audio>    </div><script type="text/javascript">    $(function(){        //1.fullpage        $(".main").fullpage({            sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b']        });        //2.控制音频的播放        var audioBox = document.getElementById('audioBox');        var audio = document.getElementById("audio");        audioBox.onclick = function(){        if(audio.paused){            audio.play();        }        else        {            audio.pause();        }    }    });</script></body></html>