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