当前位置：首页 > 全部内容 > 正文

fullPage.js与CSS3实现全屏滚动及动画效果教程

作者：窗边听雨

时间：2026-10-22

浏览：561

本文介绍如何使用jQuery插件fullPage.js结合CSS3实现全屏滚动效果。通过配置sectionsColor设置背景，利用HTML结构组织内容，并借助CSS3的transform、transition及keyframes属性，实现图片淡入、滑入等多种动态展示效果，同时集成音频播放控制。

文章目录

fullPage.js全屏滚动效果概述

首先介绍fullPage，这是一款基于jQuery的插件，主要功能是实现鼠标上下滑动时自动切换至上一屏或下一屏的效果。对于需要打造高端大气的网页展示效果，该插件是一个非常优秀的选择。接下来将展示基本的运行效果。

页面总共包含四屏内容。

fullPage.js全屏滚动效果概述

fullPage.js全屏滚动效果概述

fullPage.js全屏滚动效果概述

fullPage.js全屏滚动效果概述

当用户每次进行上下滑动操作时，页面会以整屏为单位进行切换。

第一屏仅包含一张图片，而其余三屏均由左侧的三张图片与右侧的两张图片组合而成。

这三屏中左侧图片的展开方式各不相同，从而呈现出更加炫酷的视觉效果。具体而言：第二屏的三张图片在页面显示时，会从下至上依次移动至正确位置；第三屏的三张图片在显示时，会从左至右依次展开至正确位置；第四屏的三张图片在显示时，会从中间向两边展开至正确位置。

实现步骤与基础配置

第一步：下载并引入jQuery库及fullPage插件，其中fullPage包含CSS和JS文件，需确保正确引入。


<script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css">
<script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>

第二步：使用HTML构建页面元素结构。


<div class = "main">

  <div class="section page1">
    <img src="./images/page1.png">
  </div>
  <div class="section page2">
    <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 class="section page3">
    <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 class="section page4">
    <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>

HTML结构中包含了四屏的内容区域以及一个audio元素，用于播放背景音乐。

第三步：利用fullPage的JavaScript配置每一屏的背景颜色，并通过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来实现透明度变化，从而达成淡入效果。


.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. 设置第四屏（原文称第五屏，实际为第四屏）的动画效果。

第四屏的动画表现为左侧的三张图片先重叠在中间图片上，触发后归位。①依照上述思想，利用translateX可以实现该效果；


.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 rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css" rel="external nofollow" rel="external nofollow" >
  <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 class="section page1">
    <img src="./images/page1.png">
  </div>
  <div class="section page2">
    <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 class="section page3">
    <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 class="section page4">
    <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>

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

anime.js 快速入门：怎么引入库并编写第一个 DOM 动画

在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原

怎么在浏览器中运行JavaScript代码并查看输出结果

JS 获取屏幕分辨率：window.screen.width 与 height 用法

为什么推荐用DOMContentLoaded代替window.onload初始化JS

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JavaScript常见SyntaxError语法错误排查与修复方法
JS 解压出现乱码或报错怎么解决？
JS动态构建复杂嵌套JSON对象的方法