社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 css教學 CSS3+fullPage.js實作全螢幕滾動效果程式碼

CSS3+fullPage.js實作全螢幕滾動效果程式碼

零下一度
零下一度
May 08, 2017 am 11:35 AM
css3 全螢幕滾動

這篇文章主要為大家詳細介紹了fullPage.js和CSS3實現全螢幕滾動效果，具有一定的參考價值，有興趣的小夥伴們可以參考一下

首先說一下fullpage，它是一個jquery的插件，用來實現滑鼠向上向下滑動，就會自動切換到上一屏或者下一屏，對於要做一些高大上的效果確實是一個很好的插件。首先先展示一下基本的效果圖。

總共有四個螢幕的內容

CSS3+fullPage.js實作全螢幕滾動效果程式碼

CSS3+fullPage.js實作全螢幕滾動效果程式碼

CSS3+fullPage.js實作全螢幕滾動效果程式碼

CSS3+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建立好元素：

<p class = "main">

  <p class="section page1">
    <img  src="/static/imghw/default1.png"  data-src="./images/page1.png"  class="lazy"   alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page2_2.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page2_3.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
    </p>
      <img  class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page3_2.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page3_3.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page4_2.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page4_3.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
  </p>

</p>
 <p id = "audioBox">
    <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio>
  </p>
登入後複製
包含了四個螢幕的內容和一個audio元素，用於播放音樂。

第三個步驟：利用fullpage的js實現每個螢幕的背景顏色，並使用js實作音樂的暫停播放

//1.fullpage，由于有四屏，其颜色也一样
    $(".main").fullpage({
sectionsColor: [&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;]
    });

    //2.控制音频的播放
    var audioBox = document.getElementById(&#39;audioBox&#39;);
    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.實現第二螢幕的動畫：


第二螢幕的動畫，就是左側的三個圖片在頁面顯示時，從下到上依序滑進視窗。
核心想法：使用trans
for

m: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的動畫：

key

frames

.page4.active .list img:nth-child(1){
    transform:translateX(0px);
    -webkit-animation: &#39;flymove1&#39; 1s ease-in 1;  /*动画名、持续时间、更细粒度动画，重复次数*/
  }

  .page4.active .list img:nth-child(3){
    transform:translateX(0px);
    -webkit-animation: &#39;flymove2&#39; 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: &#39;flymove1&#39; 1s ease-in 1; /*动画名、持续时间、更细粒度动画，重复次数*/
  }

  .page4.active .list img:nth-child(3){
    transform:translateX(0px);
    -webkit-animation: &#39;flymove2&#39; 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>

<p class = "main">

  <p class="section page1">
    <img  src="/static/imghw/default1.png"  data-src="./images/page1.png"  class="lazy"   alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page2_2.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page2_3.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
    </p>

      <img  class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page3_2.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page3_3.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page4_2.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  src = "./images/page4_3.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js實作全螢幕滾動效果程式碼" >
  </p>

</p>
 <p id = "audioBox">
    <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio>
  </p>
<script type="text/javascript">
  $(function(){

    //1.fullpage
    $(".main").fullpage({
      sectionsColor: [&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;]
    });
    //2.控制音频的播放

    var audioBox = document.getElementById(&#39;audioBox&#39;);
    var audio = document.getElementById("audio");

    audioBox.onclick = function(){

    if(audio.paused){
      audio.play();
    }
    else
    {
      audio.pause();
    }
  }
  });
</script>
</body>
</html>
登入後複製
【相關推薦】

1. 

免費css線上影片教學

2. 

css線上手冊

3. ###php.cn獨孤九賤（2）－css影片教學######

以上是CSS3+fullPage.js實作全螢幕滾動效果程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
3 週前 By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前 By DDD
威爾R.E.P.O.有交叉遊戲嗎？
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7559
15
CakePHP 教程
1384
52
steam的賬戶名稱是什麼格式
83
11
win11激活密鑰永久
59
19
NYT連接提示和答案
28
96
顯示更多
Related knowledge
純CSS3怎麼實現波浪效果？ （程式碼範例） 純CSS3怎麼實現波浪效果？ （程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

巧用CSS實現各種奇形怪狀按鈕（附代碼） 巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

原來利用純CSS也能實現文字輪播與圖片輪播！ 原來利用純CSS也能實現文字輪播與圖片輪播！ Jun 10, 2022 pm 01:00 PM

怎麼製作文字輪播與圖片輪播？大家第一想到的是利用js，其實利用純CSS也能實現文字輪播與圖片輪播，下面來看看實作方法，希望對大家有幫助！

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實作方法：1、使用「:active」選擇器選取滑鼠點擊圖片的狀態；2、使用transform屬性和scale()函數實現圖片放大效果，語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

css3怎麼設定動畫旋轉速度 css3怎麼設定動畫旋轉速度 Apr 28, 2022 pm 04:32 PM

在css3中，可以利用「animation-timing-function」屬性來設定動畫旋轉速度，該屬性用於指定動畫將如何完成一個週期，設定動畫的速度曲線，語法為「元素{animation-timing-function:速度屬性值;}」。

css3動畫效果有變形嗎 css3動畫效果有變形嗎 Apr 28, 2022 pm 02:20 PM

css3中的動畫效果有變形；可以利用「animation:動畫屬性@keyframes ..{..{transform:變形屬性}}」實現變形動畫效果，animation屬性用於設定動畫樣式，transform屬性用於設定變形樣式。

See all articles