首页
所有分类
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 31 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
javascript实现表单提交后，提交按钮不可用的方法
Apr 18 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
vue实现百度搜索功能
Dec 28 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
分析统计(1) redis shake(1) Tomcat(18) 排名(1) 数据同步(1) 速龙(1) i5 10400(1) 阿里云(6) 窗口函数(3) ipad(1)
You might like
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP中overload与override的区别
2017/02/13 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python端口扫描系统实现方法
2014/11/19 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python的历史与优缺点整理
2020/05/26 Python
Python远程linux执行命令实现
2020/11/11 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
中国双语服务优势的在线购票及活动平台：247tickets
2018/10/26 全球购物
在线课程：Skillshare
2019/04/02 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
学校四群教育实施方案
2014/06/12 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
承诺书范本大全
2015/05/04 职场文书