首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

fullPage.js和CSS3实现全屏滚动效果

Posted in Javascript onMay 05, 2017

首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。

总共有四屏的内容

fullPage.js和CSS3实现全屏滚动效果

fullPage.js和CSS3实现全屏滚动效果

fullPage.js和CSS3实现全屏滚动效果

fullPage.js和CSS3实现全屏滚动效果

当鼠标每次上下滑动时就会一整屏的切换。

第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。

这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。
第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。
第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。
第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。

第一步：下载好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>

包含了四屏的内容和一个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来改变透明度，实现淡入的效果；

.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.设置第五屏的动画。

第五屏的动画就是左侧的三个图片先重叠在中间的图片上，触发后归位。
①.依照上面的思想利用tanslateX可以实现；

.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>

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

fullPage.js和CSS3实现全屏滚动效果

- Author -

画一生情入颜容

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
Javascript技术难点之apply，call与this之间的衔接
Dec 04 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
jquery dataTable 获取某行数据
May 05 #jQuery
js实现数字递增特效【仿支付宝我的财富】
May 05 #Javascript
js和jquery中获取非行间样式
May 05 #jQuery
值得分享和收藏的xmlplus组件学习教程
May 05 #Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 #Javascript
微信小程序 开发之全局配置
May 05 #Javascript
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
May 05 #jQuery
win11(40) Tomcat(18) i5 10400(1) win10(43) 对讲机(1) i7 6700(1) i5 9400(1) React(6) ipad(1) GTX1660(1)
You might like
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
js实现常用排序算法
2016/08/09 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
无需压缩软件，用python帮你操作压缩包
2020/08/17 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
2014普法依法治理工作总结
2014/12/18 职场文书
工作失职检讨书
2015/01/26 职场文书
督导岗位职责范本
2015/04/10 职场文书
学校学期工作总结
2015/08/13 职场文书
新员工入职感言范文！
2019/07/04 职场文书
Python中相见恨晚的技巧
2021/04/13 Python