首页
所有分类
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 相关文章推荐
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
Node.js笔记之process模块解读
May 31 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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
人工智能(2) Pyecharts(7) 五子棋(12) PyTorch(1) format(1) 计算器(5) 对齐打印(1) 图像处理(1) 井字棋(1) 模型保存加载(1)
You might like
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php URL验证正则表达式
2011/07/19 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
jQuery选择器选中最后一个元素，倒数第二个元素操作示例
2018/12/10 jQuery
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
ES6中的类（Class）示例详解
2020/12/09 Javascript
python单例模式实例分析
2015/04/08 Python
详解python字节码
2018/02/07 Python
Python3几个常见问题的处理方法
2019/02/26 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
python的sys.path模块路径添加方式
2020/03/09 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
中外合拍动画首获奥斯卡提名，“上海出品”《飞奔去月球》能否拿下最终大奖？
2021/03/16 国漫
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
优秀干部获奖感言
2014/01/31 职场文书
霸王洗发水广告词
2014/03/14 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript