爱彩网

如何用 fullPage.js 創建全屏視差滾動單頁

問說網 · 發布于 2017-03-09 · 字數8481 · 瀏覽 4214 · 評論 0

使用fullPage.js,這個最受歡迎的單頁滾動插件,利用其視差擴展(Parallax extension),在屏面背景上創建美妙的,甚至令人上癮的視差效果:

如何用 fullPage.js 創建全屏視差滾動單頁

我不知道你如何,但是,當我看到應用了這種效果的網站后,我都難以停止上上下下滑動頁面!:) 真是太流暢了!

Fullpage.js可以免費無限制使用,視差擴展是需要付費的,請尊重開發作者的勞動成果,如果你有購買意圖,可使用下面的優惠碼獲取折扣。

打造視差效果的過程很容易,我甚至都不知道是否該為此寫文章一一贅述。
獲取這一擴展也很容易,包括創建全屏視差單頁網站,在 fullPage.js 初始化中使用 parallax:true,并將該元素加入每一屏(section)的 fp-bg class中。
對于那些不熟悉 fullPage.js 或運用 Javascript 有些困難的人來說,以下是詳解過程:

  • 購買此擴展,使用促銷代碼 4china,獲取20%折扣!
  • 按照發送給你的電子郵件說明,為域名獲得激活密鑰(之后在fullPage.js初始化中需要用它)。請不要混淆許可證密鑰與激活密鑰,需要使用許可證密鑰獲取域名的激活密鑰。
  • 選添視差擴展文件。
  • 使用fullPage.js擴展時,需要使用 fullpage.extensions.min.js 而不是 jquery.fullpage.js 或 jquery.fullpage.min.js,在此文檔中詳細說明了。
  • 按照此文檔中的詳細說明,創建屏(section)和頁(slide)的結構。
  • 通過在每一頁和屏中添加 <div class="fp-bg"></div>,創建視差背景元素。
  • 使用CSS,向每個 fp-bg 元素中添加背景。

例如,如果有這樣的一個屏(section):

<div class="section" id="section2">
    <div class="slide" id="slide2-1">Slide 2.1</div>
    <div class="slide" id="slide2-2">Slide 2.2</div>
</div>

通過添加 fp-bg 元素,可以為每個水平頁(slide)分配背景:

<div class="section" id="section2">
    <div class="slide" id="slide2-1">
        <div class="fp-bg"></div>
        Slide 2.1
    </div>
    <div class="slide" id="slide2-2">
        <div class="fp-bg"></div>
        Slide 2.2
    </div>
</div>

在樣式表(stylesheet)中為它們添加背景,正如添加至屛和頁一樣:

#slide2-1 .fp-bg{
    background-image: url('demo.jpg');
    background-size: cover;
}
#slide2-2 .fp-bg{
    background-image: url('demo2.jpg');
    background-size: cover;
}
  • 然后, 如此文檔中所述,初始化 fullPage.js,并添加選項 parallax:true.
  • 同時必須添加選項 parallaxKey,在擴展所需的每個注冊域中,輸入激活密鑰。

這樣就可以了,如此就有一個美妙的、令人驚喜的視差網站啦,以上所述都在 fullPage.js 文檔視差功能文檔中以英文詳細說明了。

下面是最終的演示代碼:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="../fullpage.parallax.js"></script>
    <script type="text/javascript" src="../jquery.fullpage.extensions.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#myContainer').fullpage({
            parallax: true
            //any other options you want to configure go here
        });
    });
    </script>

    <style>
        /*
        * Titles for each section
        */
        .section{
            text-align: center;
        }
        h1{
            font-size: 5em;
        }

        /*
        * Setting the backgrounds for each section / slide
        */
        .fp-bg{
            background-size: cover;
        }
        #section1 .fp-bg{
            background-image: url('imgs/bg3.jpg');
        }
        #slide2-1 .fp-bg{
            background-image: url('imgs/bg5.jpg');
        }
        #slide2-2 .fp-bg{
            background-image: url('imgs/bg1.jpg');
        }
        #slide2-3 .fp-bg{
            background-image: url('imgs/bg2.jpg');
        }
        #section3 .fp-bg{
            background-image: url('imgs/bg3.jpg');
        }
    </style>
</head>
<body>

<div id="myContainer">
    <div class="section" id="section1">
        <div class="fp-bg"></div>
        <h1>Section 1</h1>
    </div>
    <div class="section" id="section2">
        <div class="slide" id="slide2-1">
            <div class="fp-bg"></div>
            <h1>Section 2</h1>
        </div>
        <div class="slide" id="slide2-2">
            <div class="fp-bg"></div>
            <h1>Slide 2.2</h1>
        </div>
        <div class="slide" id="slide3-3">
             <div class="fp-bg"></div>
            <h1>Slide 2.3</h1>
        </div>
    </div>
    <div class="section" id="section3">
        <div class="fp-bg"></div>
        <h1>Section 3</h1></div>
    </div>
</div>

</body>
</html>

嘿!如果你是那種喜歡玩轉設置的人,這兒還有更多。

配置視差效果

可以使用選項 parallaxOptions,進一步控制各種效果。
請在此文檔中了解更多選項。在此,我做了一些簡要概述:

  • type:(默認 reveal)可以將其設置為 coverreveal。它控制當前屏在最終屏的上方或下方。如果選擇覆蓋(cover),下一屏或頁會覆蓋一部分當前屏或頁;選擇露出(reveal),則呈反轉效果,當前屏或頁會覆蓋下一屏或頁。
  • percentage: (默認值 62)定義了相對于視口的視差效果比率(percentage)。較小的值將具較弱的視差效果;最大值為100,將顯示完全靜態的背景。
  • property: (默認 translate)建議使用此選項的默認值。它定義是否要對 fp-bg 元素應用視差效果,或者只將它應用于屏或頁的背景屬性。
    建議使用默認值的原因是因為使用 fp-bg 元素提供了更好的性能,利用 translate3d 硬件加速。這個選項提供給那些,由于某些特定原因,不想在每個屏或頁中添加額外的 fp-bg 元素,或不能修改 HTML 標記的開發者。

如何運用這些選項?簡單得很:

$('#myContainer').fullpage({
    parallax: true
    parallaxOptions:{
        type: 'cover',
        percentage: 50
    }
});

如何將視差背景僅應用于特定屏?

這依舊很容易。不要在該屏中添加 fp-bg 元素,就可以了。
但是,當 propertybackground 時,就不可以了。不過也沒有什么可擔心的,不是么?正如我所說的,我一項建議使用默認選項:translate。:)

常見問題

為什么需要激活密鑰才能使用擴展?

擴展許可證由要使用它的網站(域)的數量決定,擴展的價格也取決于此。
需要激活密鑰來確保只可在許可所述數量的網站中使用該擴展。

可以在鏡像網站中使用它,然后將其移至運營網站么?

是的,可以。必須先將鏡像網站(staging site)注冊在擴展中,然后,當你要將其移至運營網站時,請向我索要一個新的激活密鑰。如果可能的話,請用英文溝通!:) 那樣我會更快的回復你。

視差擴展是否與其他擴展和功能兼容?

是的。可以兼容大多數其他擴展和功能,除了在演示頁面中“兼容性”鏈接下的那些,即拖動和移動(Drag And Move)、偏移屏(Offset Sections)和 fp-auto-heightfp-auto-heightresponsive 功能。

可以退款嗎?

當然可以!在一些特定情況下,無論由于任何原因,你認為擴展無法達到預期的效果,只要你未將激活密鑰用于任何域,便可以獲得全額退款。

本文系作者 問說網 授權問說網發表,并經問說網編輯,轉載請注明出處和 本文鏈接

相關文章

  • 2015-06-28Apache中Rewrite模塊的安裝和使用
  • 2015-06-29Mod_rewrite語法快速入門指南
  • 2016-04-23分享20條做好設計的規則
  • 2016-05-23Photoshop繪制一枚通透質感的游戲按鈕
  • 2016-06-06PHP求異形多維數組的平均值
  • 2016-07-06Java中面向對象的封裝和繼承以及多態
  • 2016-07-14LionBars創建類似OSX Lion操作系統風格的滾動條
  • 2016-08-16程序員高效技巧系列之完全脫離鼠標的終端
  • 發布評論

    為您推薦

    問說網 · 發布于 2015-12-08

    Moment.js簡單易用的輕量級JavaScript日期處理類庫

    Moment.js 是一個簡單易用的輕量級JavaScript日期處理類庫,提供了日期格式化、日期解析等功能。它支持在瀏覽器和NodeJS兩種環境中運行。

    一個通用HASH算法的實現
    問說網 · 發布于 2016-03-13

    一個通用HASH算法的實現

    由于在項目中需要使用到不同關鍵字類型(整數,字符串等)來構建HASH表,可以使用一個較為通用的HASH表操作算法來實現。HASH表具體的功能如下。

    萌萌噠!教你用AI繪制一只打坐的可愛奶牛

    如果您想了解Adobe Illustrator里一些簡單的著色技術,那就跟我一起學習這個有趣又引人深思的教程吧。我們要使用網格工具繪制一頭在綠草地上盤腿打坐的可…

    • 萌萌噠!教你用AI繪制一只打坐的可愛奶牛
    • 萌萌噠!教你用AI繪制一只打坐的可愛奶牛
    • 萌萌噠!教你用AI繪制一只打坐的可愛奶牛
    • 萌萌噠!教你用AI繪制一只打坐的可愛奶牛
    MatthewMag · 發布于 2016-05-14 · 瀏覽 1150 · 評論 0

    網頁設計熱潮!扁平和簡約瘋狂來襲

    在過去幾年里,軟件和APP的界面設計風格發生了迅速變化,由3D、擬物發展到扁平、簡約。盡管這一趨勢普遍存在,我們還是思考下是如何發展至此的,以及它對整個界面設計…

    • 網頁設計熱潮!扁平和簡約瘋狂來襲
    • 網頁設計熱潮!扁平和簡約瘋狂來襲
    • 網頁設計熱潮!扁平和簡約瘋狂來襲
    • 網頁設計熱潮!扁平和簡約瘋狂來襲
    晚風與你 · 發布于 2016-05-16 · 瀏覽 1222 · 評論 0

    智能電視用戶體驗設計分享之焦點篇

    智能電視作為新興行業,國內相關的用戶體驗知識少得可憐。今天有請負責智能電視APP設計一年半的@卜卜胡蘿卜1992 給大家分享一些實用的設計經驗,科普電視用戶體驗…

    • 智能電視用戶體驗設計分享之焦點篇
    • 智能電視用戶體驗設計分享之焦點篇
    • 智能電視用戶體驗設計分享之焦點篇
    • 智能電視用戶體驗設計分享之焦點篇
    SymonsJessie · 發布于 2016-05-17 · 瀏覽 1232 · 評論 0
    問說網 · 發布于 2016-07-05

    刷流量的注意了使用流量寶可能會中毒!

    相信大家都知道刷流量的有很多軟件,最著名的就是流量精靈和流量寶,而我一直使用的流量寶,兩個軟件的使用基本差不多,可是你知道嗎?使用流量刷流量可能會中毒,這不是危…

    Vincent · 發布于 2016-07-06

    正則表達式

    包 java.uti.regex   類 Pattern 正則表達式的編譯表示形式 Matcher 通過解釋 Pattern 對 character …

    Vincent · 發布于 2016-07-06

    SSH環境搭建

    Struts部分 web.xml中配置: <filter> ??? <filter-name>struts2</filter-na…

    問說網手機版

    躺著 站著 跪著輕松訪問

    更多詳情 關于作者

    問說網

    問說網分享與設計有關的文章素材界面和作品,提供設計教程、素材分享、界面欣賞、編程設計、設計書籍、設計師導航等內容,你可以在這里閱讀、學習、分享、交流。

    13177 文章
    493 評論
    2123 人氣

    更多 熱門話題

    APP界面

    關注 APP界面

    文章 41506 · 瀏覽 3745

    APP欣賞

    關注 APP欣賞

    文章 41427 · 瀏覽 3544

    APP手機界面

    關注 APP手機界面

    文章 41417 · 瀏覽 3786

    圖片素材

    關注 圖片素材

    文章 29463 · 瀏覽 3009

    高清圖片

    關注 高清圖片

    文章 26530 · 瀏覽 3250

    更多 推薦作者

    關注 怎麼繼續

    文章 90 · 評論 2

    關注 溫柔的溫柔

    文章 91 · 評論 0

    關注 過往溫柔

    文章 98 · 評論 0

    關注 無感覺

    文章 91 · 評論 0

    關注 風箏斷了線

    文章 89 · 評論 0

    關注 空城

    文章 107 · 評論 0

    ?
    頂部 反饋 評論 底部

    意見反饋

    感謝您對問說網的支持,提出您在使用過程中遇到的問題或寶貴建議,您的反饋對我們產品的完善有很大幫助。

    您的反饋我們已收到!

    感謝您提供的寶貴意見,我們會在1-2個工作日,通過您留下的聯系方式將處理結果反饋給您!

    爱彩网