首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。
总共有四屏的内容
当鼠标每次上下滑动时就会一整屏的切换。
第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。
这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。
第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。
第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。
第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。
第一步：下载好jquery和fullpage插件，fullpage中包含css和js并引入。
<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>
第二步：用html建立好元素：
<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>
包含了四屏的内容和一个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来改变透明度，实现淡入的效果；