|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
50款漂亮的全屏滾動網(wǎng)站模板[fullPage.js插件創(chuàng)建]
作者:admin 時間:2023-7-5 14:40:48 瀏覽:全屏滾動網(wǎng)站是指無論屏幕分辨率如何，都會填充整個瀏覽器窗口的網(wǎng)站。隨著屏幕尺寸和分辨率的增加以及互聯(lián)網(wǎng)速度的提高，似乎越來越多的網(wǎng)頁設計師使用全屏圖像作為他們的網(wǎng)站背景。超大的背景圖像可以令人驚嘆，并且比傳統(tǒng)的平鋪背景圖形更具視覺沖擊力。
瀏覽器視口是一種流體介質。有許多選項可以生成全屏背景以及將 HTML 放置在圖像上的方法。一些網(wǎng)站依靠靈活的布局在瀏覽器窗口上延伸，而另一些網(wǎng)站則使用大的、固定大小的圖像來生成完整的背景。
本文介紹一個fullPage.js插件，它非常輕松地為你提供最佳全屏滾動網(wǎng)站的示例選擇。
下面是 fullPage.js 插件呈現(xiàn)的50款示例，它包含了多種使用場景（在演示頁面右上角下拉菜單中選擇），滿足各種網(wǎng)頁設計師的要求。
下面是 fullPage.js 官方提供的50款示例下載，我把它放到了百度網(wǎng)盤，方便下載。
鏈接：https://pan.baidu.com/s/1v2Kht9GmXB29a-Gamaw_Ug
提取碼：ig56
這里通過一個簡單的演示示例，解釋如何應用它的代碼結構。
![50款漂亮的全屏滾動網(wǎng)站模板[fullPage.js創(chuàng)建]](http://m.gazebo2go.com/tutorial/html/upload/2023/7/202307051533067341.gif)
示例代碼
下面是一個示例的完整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>無包裝，無額外標記</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 結構
HTML 文件中的首行 HTML 代碼必須使用 HTML DOCTYPE 聲明，否則可能會遇到代碼段高度問題。HTML 5 doctype 中的示例： <!DOCTYPE html>。
每個代碼段定義為包含 section 類的元素。 默認情況下，第一個 section 代碼段，將被視為主頁。 代碼段應進行封裝（即 <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)建橫向滑塊，每個滑動頁將默認定義為包含 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 初始化
你只需要在關閉 </body> 標簽之前調用 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 演示
所有選項的更復雜的初始化如下所示：
var myFullpage = new fullpage('#fullpage',
{
// 導航
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 選項或屬性 data-anchor ），那么你將能夠在一個 section 里使用錨鏈接直接導航到某個 slide。
這是一個錨鏈接的例子： https://你的域名/fullPage/#secondPage/2 （在你手動訪問該 section/slide 就會看到的 URL ） 請注意，URL 的最后部分以 #secondPage/2 結尾。
以下初始化：
new fullpage('#fullpage', {
anchors:['firstPage', 'secondPage', 'thirdPage']
});URL #secondPage/2 結尾處的錨分別定義了目標 section 和 slide 。 在前面的 URL 中，目標 section 將是使用錨點 secondPage 定義的 section ，slide 將會是第 2 張 slide ，因為我們使用索引 2 。 （一個 section 的第一個 slide 有索引 0 ，在技術上這是一個 section ）。
如果我們在HTML標記中使用屬性 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 ，這相當于之前的 #secondPage/2 。
請注意，如果沒有提供 anchors 數(shù)組，則也可以使用 data-anchor 屬性以同樣的方式定義節(jié)錨點。
注意！data-anchor 標記的值不能與站點上的任何 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 ，只需在要應用的 section 中使用 fp-auto-height 類即可，則可以調用你的 section/slide 中定義的高度。
<div class="section">整個視圖</div>
<div class="section fp-auto-height">自動高度</div>
筆記
自動高度示例，請參看官方50款示例下載包：examples\auto-height.html
section 響應自動高度
響應自動高度可以通過使用 fp-auto-height-responsive 類來調用。 這種方式 section 將全屏，直到響應模式終止。 根據(jù)定義調整大小，可能是大于或小于視口。
筆記
響應自動高度示例，請參看官方50款示例下載包：examples\responsive-auto-height.html
由 fullpage.js 添加的狀態(tài)類
Fullpage.js 在不同的元素中添加多個類型來保存網(wǎng)站狀態(tài)的記錄：
active被添加到當前可見 section 和 slide 。active被添加到當前菜單元素（如果使用 menu 選項）。fp-viewing-SECTION-SLIDE形式的類型被添加到網(wǎng)站的body元素中。(例如： fp-viewing-secondPage-0) SECTION 和 SLIDE 部分將成為當前section和slide的錨（或索引，如果沒有提供錨）。- 當進入響應模式時，
fp-responsive添加到body元素 - 當啟用 fullpage.js 時，
fp-enabled添加到 html 元素。 （并在銷毀時被移除）。 - 當 fullPage.js 被銷毀時，
fp-destroyed被添加到 fullpage.js 容器中。
懶加載
fullPage.js 提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會減緩網(wǎng)站的加載速度，也不會浪費數(shù)據(jù)傳輸。 當使用懶加載時，所有這些元素只有在進入視口時才會加載。 要啟用懶加載，你只需將 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 的延懶載解決方案，則可以通過設置 lazyLoading: false 選項來禁用fullPage.js 懶加載。
筆記
懶加載示例，請參看官方50款示例下載包： \examples\lazy-load.html
自動播放/暫停嵌入式媒體
注意：根據(jù)操作系統(tǒng)和瀏覽器的不同，自動播放功能可能無法在某些移動設備上使用（即 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>
總結
本文介紹了一個fullPage.js插件，它非常輕松地為你提供最佳全屏滾動網(wǎng)站的示例選擇。喜歡的朋友可以收藏本頁，或下載源碼備用。
- 站長推薦
