.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 type="text/css" href="https://www.jb51.net/article/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> <img src="https://www.jb51.net/article/images/page1.png"> </div> <div> <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> <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> <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>