fullPage.js和CSS3實(shí)現(xiàn)全屏滾動(dòng)效果
更新時(shí)間：2017年05月05日 14:28:12 作者：畫一生情入顏容
這篇文章主要為大家詳細(xì)介紹了fullPage.js和CSS3實(shí)現(xiàn)全屏滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
首先說一下fullpage，它是一個(gè)jquery的插件，用來實(shí)現(xiàn)鼠標(biāo)向上向下滑動(dòng)，就會(huì)自動(dòng)切換到上一屏或者下一屏，對(duì)于要做一些高大上的效果確實(shí)是一個(gè)很好的插件。首先先展示一下基本的效果圖。
總共有四屏的內(nèi)容
當(dāng)鼠標(biāo)每次上下滑動(dòng)時(shí)就會(huì)一整屏的切換。
第一屏是用一個(gè)圖片，其他的三屏都是由左側(cè)的三個(gè)圖片和右側(cè)的兩個(gè)圖片組成的。
這三屏左側(cè)的圖片展開方式不同，所以就更有炫酷的效果。
第二屏的三個(gè)圖片是當(dāng)頁面顯示時(shí)從下到上依次出來到正確的位置。
第三屏的三個(gè)圖片是當(dāng)頁面顯示時(shí)從左到右依次展開到正確的位置。
第四屏的三個(gè)圖片是當(dāng)頁面顯示時(shí)從中間到兩邊展開到正確的位置。
第一步：下載好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>
包含了四屏的內(nèi)容和一個(gè)audio元素，用于播放音樂。
第三步：利用fullpage的js實(shí)現(xiàn)每一屏的背景顏色 ，并使用js實(shí)現(xiàn)音樂的暫停播放
//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進(jìn)行布局：
<style type="text/css">
*{
margin: 0;
padding:0;
}
//設(shè)置背景音樂的圖標(biāo)
#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;
}
//讓每屏超出的都自動(dòng)隱藏
.section{
overflow: hidden;
}
/*設(shè)置第一屏的圖片，因?yàn)榈谝黄烈仓挥幸粋€(gè)圖片*/
.page1 img{
width: 50%;
margin-left: 30%;
}
/*從第二屏開始都包含一個(gè)class=list的元素塊，設(shè)置其距離左側(cè)的距離*/
[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%;
}
通過第四步之后基本效果就已經(jīng)完成了，但最后一點(diǎn)就是還沒有給四屏的圖片實(shí)現(xiàn)動(dòng)畫效果。
第五步：實(shí)現(xiàn)動(dòng)畫效果。
1.怎樣判斷當(dāng)前滾動(dòng)到了哪一屏？
因?yàn)閒ullpage會(huì)給當(dāng)前頁加一個(gè)active的class，所以利用class就可以判斷處于當(dāng)前頁的時(shí)候觸發(fā)動(dòng)畫。
2.實(shí)現(xiàn)第一屏的動(dòng)畫
第一屏主要是圖片的淡入效果。
思路:通過改變opacity屬性，結(jié)合transition來改變透明度，實(shí)現(xiàn)淡入的效果；
.page1 img{
opacity: 0; /*初始狀態(tài)為全透明*/
/*加上供應(yīng)商前綴，持續(xù)時(shí)間為1.5s*/
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
}
/*當(dāng)?shù)谝豁擄@示的時(shí)候觸發(fā),當(dāng)?shù)谝豁摃r(shí)就會(huì)自動(dòng)加上active類*/
.page1.active img{
opacity: 1;
}
3.實(shí)現(xiàn)第二屏的動(dòng)畫：
第二屏的動(dòng)畫，就是左側(cè)的三個(gè)圖片在頁面顯示時(shí)，從下到上依次滑進(jìn)窗口。
核心思路 ：使用transform:translateY 和transition配合實(shí)現(xiàn);
transition是檢測(cè)屬性值變化
translateY平移
/*動(dòng)畫的完成時(shí)間為1s，初始位置三個(gè)圖片都處于向下移動(dòng)到1000像素，即移出屏幕外。*/
.page2 .list img{
transition:1s;
transform: translateY(1000px);
}
/*當(dāng)?shù)诙劣|發(fā)時(shí)，圖片回到原始位置*/
.page2.active .list img{
transform:translateY(0px);
}
/*利用結(jié)構(gòu)化偽類找到每一個(gè)圖片并設(shè)置延時(shí)，為了使動(dòng)畫更靈活*/
.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.實(shí)現(xiàn)第三屏的動(dòng)畫
有了translateY那么第三屏是向左右移動(dòng)，必然會(huì)有translateX控制水平方向。首先初始狀態(tài)讓三張圖片都重疊在最左側(cè)，當(dāng)觸發(fā)動(dòng)畫時(shí)依次鋪開，仿照第二屏的例子，很容易寫出來‘
.page .list img{
/設(shè)置動(dòng)畫持續(xù)時(shí)間為1s，動(dòng)畫開始時(shí)延遲0.5s/
transition: 1s 0.5s;
}
由于本屏的兩個(gè)圖片初始狀態(tài)的位置都要疊加在最左側(cè)的圖片上，所以對(duì)于這兩個(gè)圖片分別設(shè)置它們的translateX
.page .list img:nth-child(2){
/向左移動(dòng)了250px剛好與第一個(gè)重疊/
transform:translateX(-250px);
}
.page .list img:nth-child(3){
/向左移動(dòng)了500px剛好與第一個(gè)重疊/
transform:translateX(-500px);
}
/設(shè)置觸發(fā)時(shí)的動(dòng)畫，讓所有的img歸位/
.page3.active .list img{
transform:translateX(0px);
}
5.設(shè)置第五屏的動(dòng)畫。
第五屏的動(dòng)畫就是左側(cè)的三個(gè)圖片先重疊在中間的圖片上，觸發(fā)后歸位。
①.依照上面的思想利用tanslateX可以實(shí)現(xiàn)；
.page4 .list img{
transition: 1s 0.5s;
}
/*設(shè)置第一個(gè)和第三個(gè)的初始位置處于中間的位置上*/
.page4 .list img:nth-child(1){
transform:translateX(250px);
}
.page4 .list img:nth-child(3){
transform:translateX(-250px);
}
/*觸發(fā)時(shí)歸位*/
.page4.active .list img{
transform:translateX(0px);
}
②.除了css3的transition和transform屬性，還可以利用css3的動(dòng)畫：keyframes
.page4.active .list img:nth-child(1){
transform:translateX(0px);
-webkit-animation: 'flymove1' 1s ease-in 1; /*動(dòng)畫名、持續(xù)時(shí)間、更細(xì)粒度動(dòng)畫，重復(fù)次數(shù)*/
}
.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);}
}
關(guān)于keyframes的參數(shù)的了解，可以查一下手冊(cè)，熟悉一下就可以了。
通過上面的代碼，一個(gè)炫酷的全屏滾動(dòng)頁面就完成了！
附上源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>fullpage 實(shí)現(xiàn)全屏滾動(dòng)</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;
}
/*設(shè)置第一屏的圖片*/
.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%;
}
/*第一屏圖片的動(dòng)畫
思路:通過改變opacity屬性，結(jié)合transition來改變透明度，實(shí)現(xiàn)淡入的效果;
*/
.page1 img{
opacity: 0;/*初始狀態(tài)為全透明*/
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
}
/*當(dāng)?shù)谝豁擄@示的時(shí)候觸發(fā)*/
.page1.active img{
opacity: 1;
}
/*第二頁的動(dòng)畫
核心思路 ：使用transform:translateY 和transition配合實(shí)現(xiàn);
transition是檢測(cè)屬性值變化
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;
}
/*設(shè)置第三頁的動(dòng)畫*/
.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);
}
/*設(shè)置第四頁的動(dòng)畫*/
/*.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; /*動(dòng)畫名、持續(xù)時(shí)間、更細(xì)粒度動(dòng)畫，重復(fù)次數(shù)*/
}
.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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在頁面上，用戶會(huì)有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問題，我們應(yīng)如何去展示不同的結(jié)果呢？2009-12-12
Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
three.js中正交與透視投影相機(jī)的實(shí)戰(zhàn)應(yīng)用指南
在three.js中攝像機(jī)的作用就是不斷的拍攝我們創(chuàng)建好的場(chǎng)景,然后通過渲染器渲染到屏幕中,下面這篇文章主要給大家介紹了關(guān)于three.js中正交與透視投影相機(jī)應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-08-08
下雪了 javascript實(shí)現(xiàn)雪花飛舞
下雪了，這篇文章主要介紹了javascript實(shí)現(xiàn)雪花飛舞，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了npm包全局安裝和局部安裝過程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
this和執(zhí)行上下文實(shí)現(xiàn)代碼
Javascript中this關(guān)鍵字通常指向當(dāng)前函數(shù)的擁有者。在javascript中通常把這個(gè)擁有者叫做執(zhí)行上下文。2010-07-07
javascript 事件查詢綜合,需要的朋友可以參考下。2010-03-03
JavaScript設(shè)計(jì)模式中的橋接和中介者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的橋接和中介者模式，橋接設(shè)計(jì)模式是一種偏向于組合的設(shè)計(jì)模式，而非繼承的設(shè)計(jì)模式，實(shí)現(xiàn)的細(xì)節(jié)從一個(gè)模塊推送給另一個(gè)具有單獨(dú)模塊的對(duì)象，而中介者設(shè)計(jì)模式是指通過一個(gè)中介者對(duì)象封裝一系列的對(duì)象交互2022-06-06
JS實(shí)現(xiàn)網(wǎng)頁搶購功能（觸發(fā)，終止腳本）
小編通過一個(gè)網(wǎng)頁式的搶購功能的實(shí)現(xiàn)給大家講解一下JS如何觸發(fā)和終止腳本來完成這個(gè)任務(wù)。2017-11-11
js 通過cookie實(shí)現(xiàn)刷新不變化樹形菜單
通過設(shè)置cookie來保存樹形菜單的狀態(tài)，在頁面加載時(shí)重新讀取cookie來設(shè)置菜單2014-10-10