国产一区二区三区四区五区tv,97SE狠狠狠狠狼鲁亚洲综合色

技術(shù)頻道 - html技術(shù)

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

作者:admin 時(shí)間:2023-7-5 14:40:48 瀏覽:

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

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

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

fullPage.js插件

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

demo

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

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

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

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

demo download

示例代碼

下面是一個(gè)示例的完整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 聲明，否則可能會(huì)遇到代碼段高度問題。HTML 5 doctype 中的示例： <!DOCTYPE html>。

每個(gè)代碼段定義為包含 section 類的元素。默認(rèn)情況下，第一個(gè) section 代碼段，將被視為主頁。代碼段應(yīng)進(jìn)行封裝（即 <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>

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

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

為在代碼段中創(chuàng)建橫向滑塊，每個(gè)滑動(dò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', {
  //這里是選項(xiàng)
  autoScrolling:true,
  scrollHorizontally: true
});

使用 jQuery 進(jìn)行初始化

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

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

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

帶有所有功能選項(xiàng)的 JS 演示

所有選項(xiàng)的更復(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',
    // 滾動(dòng)
    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 和錨鏈接（在每個(gè) section 使用 anchors 選項(xiàng)或?qū)傩?data-anchor ），那么你將能夠在一個(gè) section 里使用錨鏈接直接導(dǎo)航到某個(gè) slide。

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

以下初始化：

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

URL #secondPage/2 結(jié)尾處的錨分別定義了目標(biāo) section 和 slide 。在前面的 URL 中，目標(biāo) section 將是使用錨點(diǎn) secondPage 定義的 section ，slide 將會(huì)是第 2 張 slide ，因?yàn)槲覀兪褂盟饕?2 。（一個(gè) section 的第一個(gè) slide 有索引 0 ，在技術(shù)上這是一個(gè) section ）。

如果我們?cè)贖TML標(biāo)記中使用屬性 data-anchor ，就可以使用自定義錨點(diǎn)來代替它的索引：

<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 。

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

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

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

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

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

<div class="section">整個(gè)視圖</div>
<div class="section fp-auto-height">自動(dòng)高度</div>

筆記

自動(dòng)高度示例，請(qǐng)參看官方50款示例下載包：examples\auto-height.html

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

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

筆記

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

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

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

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

懶加載

fullPage.js 提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會(huì)減緩網(wǎng)站的加載速度，也不會(huì)浪費(fèi)數(shù)據(jù)傳輸。當(dāng)使用懶加載時(shí)，所有這些元素只有在進(jìn)入視口時(shí)才會(huì)加載。要啟用懶加載，你只需將 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)使用另一個(gè)使用 data-src 的延懶載解決方案，則可以通過設(shè)置 lazyLoading: false 選項(xiàng)來禁用fullPage.js 懶加載。

筆記

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

自動(dòng)播放/暫停嵌入式媒體

demo download

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

在 section/slide 載入：

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

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

失焦暫停

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

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

總結(jié)

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

標(biāo)簽: fullPage.js 全屏滾動(dòng) 網(wǎng)站模板

※ 網(wǎng)站速度慢？試試網(wǎng)站自動(dòng)優(yōu)化工具 ※

相關(guān)文章

海外服務(wù)器2.8折
CN2直連大陸

25元搶購

恒創(chuàng)科技

立即咨詢 >

站長推薦

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索