技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

50款漂亮的全屏滾動網(wǎng)站模板[fullPage.js插件創(chuàng)建]

作者:admin    時間:2023-7-5 14:40:48    瀏覽:

全屏滾動網(wǎng)站是指無論屏幕分辨率如何，都會填充整個瀏覽器窗口的網(wǎng)站。隨著屏幕尺寸和分辨率的增加以及互聯(lián)網(wǎng)速度的提高，似乎越來越多的網(wǎng)頁設(shè)計師使用全屏圖像作為他們的網(wǎng)站背景。超大的背景圖像可以令人驚嘆，并且比傳統(tǒng)的平鋪背景圖形更具視覺沖擊力。

瀏覽器視口是一種流體介質(zhì)。有許多選項可以生成全屏背景以及將 HTML 放置在圖像上的方法。一些網(wǎng)站依靠靈活的布局在瀏覽器窗口上延伸，而另一些網(wǎng)站則使用大的、固定大小的圖像來生成完整的背景。

本文介紹一個fullPage.js插件，它非常輕松地為你提供最佳全屏滾動網(wǎng)站的示例選擇。

fullPage.js插件

下面是 fullPage.js 插件呈現(xiàn)的50款示例，它包含了多種使用場景（在演示頁面右上角下拉菜單中選擇），滿足各種網(wǎng)頁設(shè)計師的要求。

demo

下面是 fullPage.js 官方提供的50款示例下載，我把它放到了百度網(wǎng)盤，方便下載。

鏈接：https://pan.baidu.com/s/1v2Kht9GmXB29a-Gamaw_Ug 
提取碼：ig56

這里通過一個簡單的演示示例，解釋如何應(yīng)用它的代碼結(jié)構(gòu)。

50款漂亮的全屏滾動網(wǎng)站模板[fullPage.js創(chuàng)建] 

demodownload

示例代碼

下面是一個示例的完整HTML代碼。

simple.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Resource-type" content="Document" />
  <link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
</head>
<body>

<div id="fullpage">
  <div class="section active" id="section0"><h1>fullPage.js</h1></div>
  <div class="section" id="section1">
    <div class="slide "><h1>簡單演示</h1></div>
    <div class="slide active"><h1>你的文本</h1></div>
    <div class="slide"><h1>另一文本</h1></div>
    <div class="slide"><h1>更多文本</h1></div>
  </div>
  <div class="section" id="section2"><h1>無包裝，無額外標(biāo)記</h1></div>
  <div class="section" id="section3"><h1>只是最簡單的演示</h1></div>
</div>

<script type="text/javascript" src="../dist/fullpage.js"></script>
<script type="text/javascript">
  var myFullpage = new fullpage('#fullpage', {
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff']
  });
</script>
</body>
</html>

使用說明

包含文件

正如示例文件所示，需要引用：

  • JavaScript 文件 fullpage.js (或其壓縮版本 fullpage.min.js)
  • css 文件 fullpage.css
<link rel="stylesheet" type="text/css" href="fullpage.css" />

<script type="text/javascript" src="fullpage.js"></script>

HTML 結(jié)構(gòu)

HTML 文件中的首行 HTML 代碼必須使用 HTML DOCTYPE 聲明，否則可能會遇到代碼段高度問題。HTML 5 doctype 中的示例： <!DOCTYPE html>。

每個代碼段定義為包含 section 類的元素。 默認(rèn)情況下，第一個 section 代碼段，將被視為主頁。 代碼段應(yīng)進行封裝（即 <div id="fullpage">）。 封裝不能是 body 元素。

<div id="fullpage">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

如果你想定義一個與眾不同的起始頁面，而不是原始第一段或第一個滑動頁，只需將 active 類添加到你想首先載入的段或滑動頁。

<div class="section active">Some section</div>

為在代碼段中創(chuàng)建橫向滑塊，每個滑動頁將默認(rèn)定義為包含 slide 類的元素：

<div class="section">
  <div class="slide"> slide 1 </div>
  <div class="slide"> slide 2 </div>
  <div class="slide"> slide 3 </div>
  <div class="slide"> slide 4 </div>
</div>

初始化 

用 Javascript 初始化

你只需要在關(guān)閉 </body> 標(biāo)簽之前調(diào)用 fullPage.js。 

new fullpage('#fullpage', {
  //這里是選項
  autoScrolling:true,
  scrollHorizontally: true
});

使用 jQuery 進行初始化

如果你需要，你也可以將 fullpage.js 作為 jQuery 插件使用！

$(document).ready(function() {
  $('#fullpage').fullpage({
    //這里是選項
    autoScrolling:true,
    scrollHorizontally: true
  });

  //方法
  $.fn.fullpage.setAllowScrolling(false);
});

帶有所有功能選項的 JS 演示

所有選項的更復(fù)雜的初始化如下所示：

var myFullpage = new fullpage('#fullpage',
{
    // 導(dǎo)航
    menu: '#menu',
    lockAnchors: false,
    anchors: ['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: false,
    slidesNavPosition: 'bottom',
    // 滾動
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 600,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    dragAndMove: false,
    offsetSections: false,
    resetSliders: false,
    fadingEffect: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: true,
    scrollOverflowMacStyle: false,
    scrollOverflowReset: false,
    touchSensitivity: 15,
    bigSectionsDestination: null,
    // 可訪問
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,
    // 布局
    controlArrows: true,
    controlArrowsHTML: ['<div class="fp-arrow"></div>', '<div class="fp-arrow"></div>'],
    verticalCentered: true,
    sectionsColor: ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions:
    {
        type: 'reveal',
        percentage: 62,
        property: 'translate'
    },
    dropEffect: false,
    dropEffectOptions:
    {
        speed: 2300,
        color: '#F82F4D',
        zIndex: 9999
    },
    waterEffect: false,
    waterEffectOptions:
    {
        animateContent: true,
        animateOnMouseMove: true
    },
    cards: false,
    cardsOptions:
    {
        perspective: 100,
        fadeContent: true,
        fadeBackground: true
    },
    // 自定義選擇器
    sectionSelector: '.section',
    slideSelector: '.slide',
    lazyLoading: true,
    observer: true,
    credits:
    {
        enabled: true,
        label: 'Made with fullPage.js',
        position: 'right'
    },
    // 事件
    beforeLeave: function(origin, destination, direction, trigger) {},
    onLeave: function(origin, destination, direction, trigger) {},
    afterLoad: function(origin, destination, direction, trigger) {},
    afterRender: function() {},
    afterResize: function(width, height) {},
    afterReBuild: function() {},
    afterResponsive: function(isResponsive) {},
    afterSlideLoad: function(section, origin, destination, direction, trigger) {},
    onSlideLeave: function(section, origin, destination, direction, trigger) {},
    onScrollOverflow: function(section, slide, position, direction) {}
});

創(chuàng)建鏈接到 section 或 slide

如果你在 section 中使用 fullPage.js 和錨鏈接（在每個 section 使用 anchors 選項或?qū)傩?data-anchor ），那么你將能夠在一個 section 里使用錨鏈接直接導(dǎo)航到某個 slide。

這是一個錨鏈接的例子： https://你的域名/fullPage/#secondPage/2 （在你手動訪問該 section/slide 就會看到的 URL ） 請注意，URL 的最后部分以 #secondPage/2 結(jié)尾。

以下初始化：

new fullpage('#fullpage', {
  anchors:['firstPage', 'secondPage', 'thirdPage']
});

URL #secondPage/2 結(jié)尾處的錨分別定義了目標(biāo) section 和 slide 。 在前面的 URL 中，目標(biāo) section 將是使用錨點 secondPage 定義的 section ，slide 將會是第 2 張 slide ，因為我們使用索引 2 。 （一個 section 的第一個 slide 有索引 0 ，在技術(shù)上這是一個 section ）。

如果我們在HTML標(biāo)記中使用屬性 data-anchor ，就可以使用自定義錨點來代替它的索引： 

<div class="section">
  <div class="slide" data-anchor="slide1"> slide 1 </div>
  <div class="slide" data-anchor="slide2"> slide 2 </div>
  <div class="slide" data-anchor="slide3"> slide 3 </div>
  <div class="slide" data-anchor="slide4"> slide 4 </div>
</div>

在最后一種情況中，我們使用的URL將是 #secondPage/slide3 ，這相當(dāng)于之前的 #secondPage/2 。

請注意，如果沒有提供 anchors 數(shù)組，則也可以使用 data-anchor 屬性以同樣的方式定義節(jié)錨點。

注意！data-anchor 標(biāo)記的值不能與站點上的任何 ID 元素（或 IE 的 NAME 元素）相同。

創(chuàng)建更小或更大的 section

fullPage.js 提供了一種方法來刪除 section 和 slide 的全屏高度限制。 可以創(chuàng)建高度小于或大于視圖的section。 這是頁腳的理想方式。 需明白所有 section 使用此功能并沒有意義，這一點很重要。 如果網(wǎng)站的初始加載中有多個 section，則fullPage.js 將不會滾動以查看下一個 section ，因為它已經(jīng)在視圖中。

創(chuàng)建更小的 section ，只需在要應(yīng)用的 section 中使用 fp-auto-height 類即可，則可以調(diào)用你的 section/slide 中定義的高度。

<div class="section">整個視圖</div>
<div class="section fp-auto-height">自動高度</div>

筆記

自動高度示例，請參看官方50款示例下載包：examples\auto-height.html

section 響應(yīng)自動高度

響應(yīng)自動高度可以通過使用 fp-auto-height-responsive 類來調(diào)用。 這種方式 section 將全屏，直到響應(yīng)模式終止。 根據(jù)定義調(diào)整大小，可能是大于或小于視口。

筆記

響應(yīng)自動高度示例，請參看官方50款示例下載包：examples\responsive-auto-height.html

由 fullpage.js 添加的狀態(tài)類

Fullpage.js 在不同的元素中添加多個類型來保存網(wǎng)站狀態(tài)的記錄：

  • active 被添加到當(dāng)前可見 section 和 slide 。
  • active 被添加到當(dāng)前菜單元素（如果使用 menu 選項）。
  • fp-viewing-SECTION-SLIDE 形式的類型被添加到網(wǎng)站的 body 元素中。(例如： fp-viewing-secondPage-0) SECTION 和 SLIDE 部分將成為當(dāng)前 section 和 slide 的錨（或索引，如果沒有提供錨）。
  • 當(dāng)進入響應(yīng)模式時，fp-responsive 添加到 body 元素
  • 當(dāng)啟用 fullpage.js 時，fp-enabled 添加到 html 元素。 （并在銷毀時被移除）。
  • 當(dāng) fullPage.js 被銷毀時，fp-destroyed 被添加到 fullpage.js 容器中。

懶加載

fullPage.js 提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會減緩網(wǎng)站的加載速度，也不會浪費數(shù)據(jù)傳輸。 當(dāng)使用懶加載時，所有這些元素只有在進入視口時才會加載。 要啟用懶加載，你只需將 src 屬性更改為 data-src ，如下所示：

<img data-src="image.png">
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>

如果你已經(jīng)使用另一個使用 data-src 的延懶載解決方案，則可以通過設(shè)置 lazyLoading: false 選項來禁用fullPage.js 懶加載。

筆記

懶加載示例，請參看官方50款示例下載包： \examples\lazy-load.html

自動播放/暫停嵌入式媒體

自動播放/暫停嵌入式媒體

demodownload

注意：根據(jù)操作系統(tǒng)和瀏覽器的不同，自動播放功能可能無法在某些移動設(shè)備上使用（即 IOS 的 Safari 版本 < 10.0）。

在 section/slide 載入：

對于視頻或音頻使用屬性 autoplay，或者對于 iframe 使用參數(shù) autoplay=1 將使得在加載頁面時播放媒體元素。 在 section/slide 載入使用而不是屬性 data-autoplay 播放。 例如：

<audio data-autoplay>
  <source src="horse.ogg" type="audio/ogg">
</audio>

失焦暫停

嵌入式 HTML5 <video> / <audio> 和 iframe 在離開某個 section 或 slide 時自動暫停。 可以通過使用屬性 data-keepplaying 來禁用。 例如：

<audio data-keepplaying>
  <source src="horse.ogg" type="audio/ogg">
</audio>

總結(jié)

本文介紹了一個fullPage.js插件，它非常輕松地為你提供最佳全屏滾動網(wǎng)站的示例選擇。喜歡的朋友可以收藏本頁，或下載源碼備用。

相關(guān)文章
    x
    • 站長推薦
    /* 左側(cè)顯示文章內(nèi)容目錄 */