这篇文章主要为大家详细介绍了fullpage.js和css3实现全屏滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。
总共有四屏的内容
当鼠标每次上下滑动时就会一整屏的切换。
第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。
这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。
第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。
第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。
第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。
立即学习“前端免费学习笔记（深入）”；
第一步：下载好jquery和fullpage插件，fullpage中包含css和js并引入。
<ｓｃｒｉｐｔ type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"><ｓｃｒｉｐｔ type="text/javascript" src = "./fullpage/jquery.fullPage.min.js">
第二步：用html建立好元素：
包含了四屏的内容和一个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进行布局：
<ｓｃｒｉｐｔ 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(); } } });