技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

技术频道 - html技术

50款漂亮的全屏滚动网站模板[fullPage.js插件创建]

作者:admin    时间:2023-7-5 14:40:48    浏览:

全屏滚动网站是指无论屏幕分辨率如何，都会填充整个浏览器窗口的网站。随着屏幕尺寸和分辨率的增加以及互联网速度的提高，似乎越来越多的网页设计师使用全屏图像作为他们的网站背景。超大的背景图像可以令人惊叹，并且比传统的平铺背景图形更具视觉冲击力。

浏览器视口是一种流体介质。有许多选项可以生成全屏背景以及将 HTML 放置在图像上的方法。一些网站依靠灵活的布局在浏览器窗口上延伸，而另一些网站则使用大的、固定大小的图像来生成完整的背景。

本文介绍一个fullPage.js插件，它非常轻松地为你提供最佳全屏滚动网站的示例选择。

fullPage.js插件

下面是 fullPage.js 插件呈现的50款示例，它包含了多种使用场景（在演示页面右上角下拉菜单中选择），满足各种网页设计师的要求。

demo

下面是 fullPage.js 官方提供的50款示例下载，我把它放到了百度网盘，方便下载。

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

这里通过一个简单的演示示例，解释如何应用它的代码结构。

50款漂亮的全屏滚动网站模板[fullPage.js创建] 

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>无包装，无额外标记</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>

为在代码段中创建横向滑块，每个滑动页将默认定义为包含 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) {}
});

创建链接到 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 数组，则也可以使用 data-anchor 属性以同样的方式定义节锚点。

注意！data-anchor 标记的值不能与站点上的任何 ID 元素（或 IE 的 NAME 元素）相同。

创建更小或更大的 section

fullPage.js 提供了一种方法来删除 section 和 slide 的全屏高度限制。 可以创建高度小于或大于视图的section。 这是页脚的理想方式。 需明白所有 section 使用此功能并没有意义，这一点很重要。 如果网站的初始加载中有多个 section，则fullPage.js 将不会滚动以查看下一个 section ，因为它已经在视图中。

创建更小的 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 将全屏，直到响应模式终止。 根据定义调整大小，可能是大于或小于视口。

笔记

响应自动高度示例，请参看官方50款示例下载包：examples\responsive-auto-height.html

由 fullpage.js 添加的状态类

Fullpage.js 在不同的元素中添加多个类型来保存网站状态的记录：

  • active 被添加到当前可见 section 和 slide 。
  • active 被添加到当前菜单元素（如果使用 menu 选项）。
  • fp-viewing-SECTION-SLIDE 形式的类型被添加到网站的 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 提供了一种延迟加载图像、视频和音频元素的方式，这样它们不会减缓网站的加载速度，也不会浪费数据传输。 当使用懒加载时，所有这些元素只有在进入视口时才会加载。 要启用懒加载，你只需将 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>

如果你已经使用另一个使用 data-src 的延懒载解决方案，则可以通过设置 lazyLoading: false 选项来禁用fullPage.js 懒加载。

笔记

懒加载示例，请参看官方50款示例下载包： \examples\lazy-load.html

自动播放/暂停嵌入式媒体

自动播放/暂停嵌入式媒体

demodownload

注意：根据操作系统和浏览器的不同，自动播放功能可能无法在某些移动设备上使用（即 IOS 的 Safari 版本 < 10.0）。

在 section/slide 载入：

对于视频或音频使用属性 autoplay，或者对于 iframe 使用参数 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插件，它非常轻松地为你提供最佳全屏滚动网站的示例选择。喜欢的朋友可以收藏本页，或下载源码备用。

相关文章
    x
    • 站长推荐
    search
    /* 左侧显示文章内容目录 */