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进行布局：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。