fullpage 延迟滚动_使用fullPage.js进行垂直和水平滚动

谭富

2023-12-01

fullpage 延迟滚动

如今，越来越多的网站是基于单页方法设计的（称为单页或单页网站）。在本文中，我们将探索如何利用fullPage.js为演示站点创建这种体验。

看看我们将在此Codepen演示上构建什么。此外，可以在此Github存储库中找到此演示的所有文件。

什么是fullPage.js？

fullPage.js是一个基于jQuery的插件，它使我们能够构建一页滚动的网站。正如我们将在接下来的部分中看到的那样，它是由Web开发人员Alvaro Trigo创建的，它带有许多不同的自定义选项。

此外，此插件提供了组织良好的文档，其中包含许多动手示例。

令人高兴的是，它不仅可以在所有现代浏览器中使用，而且还可以在IE 8和Opera 12等较旧的示例中使用。

最后，您可能想看看它的Wordpress版本。

fullPage.js入门

要开始使用fullPage，必须在项目中下载并安装以下文件：

jQuery库（≥1.6.0）
jquery.fullPage.css CSS文件
jquery.fullPage.js JS文件或其缩小版本（即jquery.fullPage.min.js ）

您可以通过访问Github存储库，使用软件包管理器（例如Bower ）或通过CDN加载必要的资产（例如cdnjs ）来获取这些文件的副本。对于本教程，我们将选择最后一个选项。

在HTML文档的<head>中放置一个指向CSS文件的链接：

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet">

...以及<body>标记前面的JS脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

现在，我们准备更深入地研究该插件！

创建整页部分

首先，我们必须指定站点的各个部分。为此，我们将section类分配给目标元素，并将它们包装在具有唯一标识符的容器中。以后，此标识符将用于初始化fullPage的实例。

默认情况下，插件将第一部分视为活动部分。但是，如果需要，我们可以通过将active类添加到所需部分来更改该行为。

这是我们的示例所需HTML结构：

<div id="fullPage">
    <section class="vertical-scrolling">
        <h2>fullPage.js</h2>
        <h3>This is the first section</h3>
        <div class="scroll-icon">
            <p>Jump into the last slide</p>
            <a href="#fifthSection/1" class="icon-up-open-big"></a
        </div>
    </section>
    <section class="vertical-scrolling">
        <!-- content here -->
    </section>
    <section class="vertical-scrolling">
        <!-- content here -->
    </section>
    <section class="vertical-scrolling">
        <!-- content here -->
    </section>  
    <section class="vertical-scrolling">
        <!-- content here -->
    </section> 
</div>

请注意，所有部分都共享一个通用的类名（即vertical-scrolling ），我们选择该类名与预定义的类名（即section ）不同。在这种情况下，我们需要在初始化过程中告知插件有关此更改的信息。

创建水平幻灯片

这些垂直堆叠的部分中的每一个可以可选地是具有一个或多个滑动件的水平滑动件。为了识别幻灯片，我们将slides类应用于目标元素，并将它们嵌套在相应的部分中。

此外，值得一提的是，从技术上讲，第一张幻灯片等于上一节。我们将尽快检查这种行为！

回到我们的示例，下面的代码片段显示了如何在第五部分中设置两个幻灯片：

<section class="vertical-scrolling">
    <div class="horizontal-scrolling">
        <h2>fullPage.js</h2>
        <h3>This is the fifth section and it contains the first slide</h3>
    </div>
    <div class="horizontal-scrolling">
        <h2>fullPage.js</h2>
        <h3>This is the second slide</h3> 
        <p class="end">Thank you!</p>
    </div>
</section>

再次，正如您所看到的，我们为幻灯片提供了自定义的类名（即， horizontal-scrolling ）。

控制网站外观

我们可以利用可用的配置参数来控制各节和幻灯片的外观。这些参数之一是sectionColor属性，它使我们可以轻松地为每个部分定义CSS background-color属性。

此外，我们可以设置自己的样式，以便进一步自定义页面。例如，假设我们要对第二部分应用完整的背景图像。这是我们可以实现的方法：

section:nth-of-type(2) {
    background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;
}

自定义导航选项

该插件提供了许多内置选项，可用于遍历各个部分和幻灯片。这些选项中的某些默认情况下处于激活状态（例如，鼠标滚轮和键盘），而其他选项则通过配置对象手动触发（例如，圆点）。

在我们的项目中，我们希望以点的形式添加额外的导航。另外，我们选择隐藏通常在滑块上显示的左右箭头。因此，启用点导航后，我们可以通过覆盖默认样式来更改其外观。这是新规则：

#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
    background: white;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
}
     
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: transparent;
    box-sizing: border-box;
    border: 1px solid #24221F;
}

下面是一个截图，展示了我们所做的更改：

请注意，我们在自定义样式表中包含了以上规则，因此避免了对插件CSS文件的更改。

创建指向节和幻灯片的链接

在浏览不同部分时，fullPage.js允许我们更改网站的URL。为此，我们使用anchors参数。更具体地说，此参数是一个数组，其中包含需要在每个部分的URL上显示的锚链接。例如，在我们的示例中，我们指定以下锚链接（应该是唯一的）：

anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

完成后，当我们访问第一部分时，站点URL的末尾将具有#firstSection标识符，在第二部分，URL的末尾将是#secondSection ，依此类推。

同样，当我们在幻灯片中滚动时，该插件还会修改URL。不过，在这一点上，我们必须记得，基本上第一张幻灯片（索引为0）是相关的父节。考虑到这一点，在我们的项目中，当我们处于第五部分的第一张幻灯片时，URL将以#fifthSection锚链接结尾。加载同一部分的第二张幻灯片将触发一个以#fifthSection/1结尾的URL，因为第二张幻灯片（索引为1）实际上是我们的“第一张”幻灯片。

值得一提的是，我们可以通过使用所需的锚点名称（应该也是唯一的）向其添加data-anchor属性来修改幻灯片data-anchor ，如以下示例所示：

<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- more content here --></div>

注意：要查看滚动时URL的变化，请查看演示的Debug View 。

将菜单链接到章节和幻灯片

为了更好地理解如何将菜单链接到整页，让我们看一下固定的标题。下面的屏幕快照显示了它的外观：

和HTML：

<div class="header-top clearfix">
    <h1 class="l-left">
        <a href="#firstSection">Your Logo</a>
    </h1>
    <a class="l-right toggle-menu" href="#">
        <i></i>
        <i></i>
        <i></i>
    </a>
</div>

只要触发了汉堡菜单图标，主菜单覆盖就会出现：

这是与此菜单相关的代码：

<nav class="hide">
    <ul id="menu">
        <li data-menuanchor="firstSection">
            <a href="#firstSection" title="First Section">First Section</a>
        </li>
        <li data-menuanchor="secondSection">
            <a href="#secondSection" title="Second Section">Second Section</a>
        </li>
        <!-- more list items here -->
    </ul>
</nav>

因此，要让fullPage知道菜单，我们必须使用menu配置属性对其进行注册。接下来，我们需要将菜单项链接到相关部分。为此，我们将data-menuanchor属性添加到我们的项目中，并使用各自的链接作为值。只要这些值匹配，插件就会将active类（当我们滚动时）附加到相应的菜单项。

请注意，该插件尚未将active类添加到幻灯片。要解决此问题，我们可以使用jQuery（最佳解决方案）或CSS。在我们的示例中，我们通过添加以下CSS规则来解决此问题：

body.fp-viewing-fifthSection-1 #menu li:last-child a {
    background: #453659;
}

请参阅以下结果：

实际上，我们没有将active类添加到第二张幻灯片中。通过利用插件附加到每个部分和幻灯片的不同body类，我们仅给此项目指定active类的样式。

注意：我们将不再关注此菜单的工作原理，因为它超出了本教程的范围。

触发各节的回调

该afterLoad一旦部加载回调被触发， onLeave回调一旦用户离开它。

在我们的项目中，加载第五部分时，我们隐藏了垂直点导航：

这是我们实现它的方法：

afterLoad: function(anchorLink, index) {
    if (index == 5) {
        $('#fp-nav').hide();
    }
}

onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
        $('#fp-nav').show();
    }
}

触发幻灯片回调

该afterSlideLoad时加载一张幻灯片，然后触发回调的onSlideLeave回调当用户离开它。

在我们的案例中，我们专注于第二张幻灯片以执行许多不同的操作。例如，一旦加载了幻灯片，我们将禁止向上滚动的可能性。此外，我们更改了此幻灯片的background-color属性以及属于它的元素的外观。

我们使用的部分代码如下所示：

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(false, 'up');
        $(this).css('background', '#374140');
        $(this).find('h2').css('color', 'white');
	    $(this).find('h3').css('color', 'white');
	    $(this).find('p').css({
            'color': '#DC3522',
            'opacity': 1,
            'transform': 'translateY(0)'
        });
    }
}
    
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(true, 'up');
    }
}

初始化插件

这是触发fullPage功能的最后一个必需步骤。在这里，我们将所有自定义项作为配置对象的一部分传递。查看下面的相关代码段：

$('#fullpage').fullpage({
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    controlArrows: false
    // more options here
});

结论

在本教程中，我们快速浏览了fullPage.js jQuery插件，并学习了如何构建响应式全页滚动网站。重要的是要了解这种类型的网站并不适合所有情况。除了引人注目的设计外，它们还有很多限制，而且难以维护，尤其是对于动态站点。另外，此格式可能会导致SEO复杂化。

如果您想使用演示站点作为试用该插件的基础，我建议以下挑战：

最后，如果您有一页网站的经验，请随时在下面的评论中与我们分享您的想法！

翻译自: https://webdesign.tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs--cms-24215