使用 Locomotive Scroll 和 Tailwind CSS 创建一个独特的滚动网站

您是否曾经想建立一个独特的单页滚动网站但不知道从哪里开始？如果是这样，请不要担心！今天我们将一起创建这样一个网站。为了实现这一点，我们将利用Locomotive Scroll，这是一个小型且易于使用的 javascript 库，用于实现炫酷的滚动效果。

此外，为了加快开发过程（并以最小的努力创建响应式布局），我们将使用Tailwind css。

我们正在建造什么

像往常一样，在继续之前，让我们检查最终结果（滚动——或者甚至更好，在大屏幕上查看演示——并检查效果）：

See the Pen  Unique Scrolling Website With Locomotive Scroll & Tailwind CSS by Envato Tuts+ (@tutsplus)  on CodePen.

什么是机车卷轴？

Locomotive Scroll 是当今存在的众多 JavaScript 滚动库之一。您可能已经在您的项目中使用了其他一些，例如ScrollTrigger.js和ScrollMagic.js。实际上，我在之前的教程中介绍了一个 ScrollMagic 示例。

以下是 Locomotive Scroll 网站上使用的定义：

“ Locomotive的开发人员使用的一个简单的滚动库。它构建为ayamflow 的virtual-scroll之上的一个层，它提供平滑滚动，支持视差效果、切换类以及在元素位于视口中时触发事件***器。”

您是否对探索这个库的功能感到好奇？让我们开始！

机车卷轴入门

要开始使用 Locomotive Scroll，您必须在项目中包含以下文件：

• 文件locomotive-scroll.css或其缩小版

• 文件locomotive-scroll.js或其缩小版

您可以通过访问其GitHub 存储库、使用包管理器（例如npm）或通过 CDN 加载必要的资产（例如jsDelivr）来下载它们。对于本教程，我们将选择最后一个选项。

如简介中所述，对于本演示，除了 Locomotive 文件之外，我们还将合并 Tailwind CSS 来创建页面布局。

考虑到这一点，如果您查看我们演示笔的“设置”选项卡，您会看到有两个外部 CSS 文件和一个外部 javaScript 文件。

1.构建页面

Locomotive Scroll 带有几个data用于操作元素的不同属性。我们将使用很多它们，因此在本教程结束时，您将很好地掌握它们的作用以及如何使用它们。

让我们从指定一个带有data-scroll-container属性的包装元素开始。在其中，我们将放置页面部分和一个返回顶部的链接。稍后，我们将通过定位这个包装器来初始化插件。

所有页面部分都将具有该data-scroll-section属性。另外，几乎所有这些都会有一个id属性。此属性将帮助我们通过菜单和返回顶部链接顺利导航到目标部分。

这是初始页面结构：

<div data-scroll-container>

  <section id="intro" class="h-screen flex items-center justify-center text-center bg-green-200" data-scroll-section>...</section>

  <section class="py-40" data-scroll-section>...</section>

  <section id="about-section" class="py-40 bg-green-50" data-scroll-section>...</section>

  <section id="office" class="py-20" data-scroll-section>...</section>

  <section id="services" class="relative py-60 bg-green-50" data-scroll-section>...</section>

  <section id="clients-section" class="py-40" data-scroll-section>...</section>

  <section id="contact" class="py-80 border-t-2 border-solid border-gray-50" data-scroll-section>...</section>

  <section class="h-screen flex items-center justify-center text-center bg-green-200" data-scroll-section>...</section>

  <a class="back-to-top fixed bottom-24 right-4 text-red-500 hover:text-red-600 focus:text-red-600 transition opacity-0 invisible" href="#intro" role="button" aria-label="Back to top" data-scroll-to> 

    <svg aria-hidden="true" xmlns="https://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">

      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 7.58l5.995 5.988-1.416 1.414-4.579-4.574-4.59 4.574-1.416-1.414 6.006-5.988z" />

    </svg>

  </a>

</div>

在这一点上，我们已经准备好仔细查看重要的页面部分。

第 1 节

第一部分将包括标题和段落。

这里还有一件重要的事情：默认情况下，返回顶部链接不会出现。当我们滚动时：

• 如果标题在视图中，则链接将/保持不可见。

• 只有当标题不在视图中时才会出现。

为了实现这个功能，我们将传递data-scroll、data-scroll-repeat和data-scroll-call="toggleBackToTop"属性给标题。现在让我们进一步讨论这些属性的作用：

属性的工作data-scroll是检查元素是否在视图中。一旦它第一次出现，插件就会将is-inview类添加到其中。这个类将不再被删除。还要注意插件如何修改元素的 CSStransform属性以应用不同的效果。

data-scroll-repeat属性的工作是重复检查元素是否在视图中。该插件将is-inview根据元素的位置切换类。在我们的例子中，我们只会将此属性与data-scroll-call需要它正常工作的属性配对使用。

该data-scroll-call属性的作用是触发机车的call事件。可以是我们想要的任何值的属性值作为参数传递给事件回调，并允许我们在目标元素进入或离开视口时做一些事情。用语言来解释有点困难，所以你最好看看 JavaScript 代码。我们将在接下来的部分中再次使用它。如前所述，请记住我们将与data-scroll-repeat属性一起使用它。

以下是我们构建本节的方式：

<section id="intro" class="h-screen flex items-center justify-center text-center bg-green-200" data-scroll-section>

  <div class="container px-5 mx-auto">

    <h1 class="text-5xl font-bold" data-scroll data-scroll-repeat data-scroll-call="toggleBackToTop">A Simple Demo With <a class="underline" href="https://locomotivemtl.github.io/locomotive-scroll/" target="_blank">Locomotive Scroll</a></h1>

    <p class="text-2xl mt-2">Scroll down ?</p>

  </div>

</section>

第 2 节

第二部分将包括菜单链接。

为了在单击链接时顺利导航到页面部分，我们必须为链接赋予data-scroll-to属性。

注意：我们会将相同的属性传递给 back-to-top 链接。

请记住，在撰写本文时，此属性不是文档的一部分。如果您想知道我是如何知道它的存在的，答案是我通过检查插件的GitHub Page的源代码找到了它。

或者，如果您不想使用此属性，您可以使用一些 JavaScript滚动方法来实现此功能。

以下是我们构建本节的方式：

<section class="py-40" data-scroll-section>

  <div class="container px-5 mx-auto">

    <nav>

      <ul class="grid md:grid-flow-col gap-8 lg:gap-16 justify-center text-center">

        <li>

          <a class="inline-block text-2xl font-medium px-4 py-2 border-4 border-double border-transparent hover:border-green-400 focus:border-green-400 rounded-md transition" href="#about-section" data-scroll-to>

            About

          </a>

        </li>

        <li>

          <a class="inline-block text-2xl font-medium px-4 py-2 border-4 border-double border-transparent hover:border-green-400 focus:border-green-400 rounded-md transition" href="#office" data-scroll-to>

            Office

          </a>

        </li>

        ...

      </ul>

    </nav>     

  </div>

</section>

第 3 节

第三部分将包括一个标题和一些文本。

当我们滚动时，我们会将标题固定在顶部。但是，持续多久？好吧，直到我们滚动过去它的父级。此时，该元素将消失，因为它将成为正常文档流的一部分。

为了实现此功能，我们将data-scroll、data-scroll-sticky和data-scroll-target="#about"属性分配给标题。一些注意事项：

• 正如我们已经知道的，该data-scroll属性将检测我们的元素是否在视图中。

• 该data-scroll-sticky属性将使其与该data-scroll-target属性配对。

• 该data-scroll-target属性的值将决定元素的初始和最终粘性位置。

我们将在第六（客户）部分采用相同的技术，因此我们将跳过该技术。

以下是我们构建本节的方式：

<section id="about-section" class="py-40 bg-green-50" data-scroll-section>

  <div class="container px-5 mx-auto">

    <div id="about" class="lg:grid grid-cols-2 gap-4 items-start">

      <h2 class="text-5xl font-extrabold" data-scroll data-scroll-sticky data-scroll-target="#about">About</h2>

      <div class="text-xl pt-4 lg:pt-0">...</div>

    </div>

  </div>

</section>

第 4 节

第四部分将包括两个Unsplash图像。

当我们滚动时，会发生视差效果。更具体地说，第一个图像的移动速度是第二个图像的四倍。

为了实现这个功能，我们将data-scroll和data-scroll-speed属性传递给图像。第二个属性的值将决定它们的滚动速度。在这里，我们将给data-scroll-speed="4.8"第一个图像和data-scroll-speed="1.2"第二个图像。

以下是我们构建本节的方式：

<section id="office" class="py-20" data-scroll-section>

  <div class="sm:grid grid-cols-2 gap-40">

    <figure class="flex items-end">

      <img class="shadow-lg h-auto" width="1000" height="667" src="office1.jpg" alt="" data-scroll data-scroll-speed="4.8">

    </figure>

    <figure>

      <img class="shadow-lg h-auto" width="1000" height="1498" src="office2.jpg" alt="" data-scroll data-scroll-speed="1.2">

    </figure>

  </div>

</section>

第 5 节

第五部分将包括一个标题和两个文本横幅来解释我们的服务。

当我们滚动时，会出现多种视差效果：

• 首先，标题的字母会以不同的速度移动。另外，每次它们进入视野时，它们都会从预定义颜色列表中获得一种随机颜色。

• 其次，横幅将在不同方向水平移动。

要实现此功能，我们将执行以下操作：

我们将为标题的字母分配data-scoll、data-scroll-repeat、data-scroll-speed和属性。data-scroll-call="randomizeTextColor"由于我们需要视差效果，因此data-scroll-speed每个字母的属性值会有所不同。记住data-scroll-call属性的作用。在这里我们说：当字母进入视口并且机车的call事件触发时，做一些事情。如果您检查 JavaScript 部分，您会注意到此时该getRandomColor()函数正在触发。data-scroll-delay可选地，在这里我们也可以将属性付诸实践。

我们还将为横幅分配data-scroll、data-scroll-direction="horizontal"、data-scroll-speed和data-scroll-target="#services"属性。将data-scroll-direction="horizontal"在滚动时水平移动元素。接下来，通过为属性赋予相反的值data-scroll-speed，我们确保它们将沿不同的方向移动（从左到右或从右到左）。最后，该data-scroll-target="#services"属性将确定水平动画何时开始。要理解它，请尝试放置id另一个部分，例如data-scroll-target="#office"并重新加载页面。请注意，动画开始的时间比应有的要早得多。

以下是我们构建本节的方式：

<section id="services" class="relative py-60 bg-green-50" data-scroll-section>

  <h2 class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -skew-x-12 whitespace-nowrap text-6xl sm:text-9xl font-extrabold py-4">

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="3" data-scroll-call="randomizeTextColor">S</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="2" data-scroll-call="randomizeTextColor">e</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="3" data-scroll-call="randomizeTextColor">r</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="2" data-scroll-call="randomizeTextColor">v</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="3" data-scroll-call="randomizeTextColor">i</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="2" data-scroll-call="randomizeTextColor">c</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="3" data-scroll-call="randomizeTextColor">e</span>

    <span class="inline-block" data-scroll data-scroll-repeat data-scroll-speed="2" data-scroll-call="randomizeTextColor">s</span>

  </h2>

  <div class="transform rotate-6 skew-x-12">

    <div data-scroll data-scroll-direction="horizontal" data-scroll-speed="20" data-scroll-target="#services">

      <span class="text-3xl sm:text-4xl md:text-6xl 2xl:text-7xl bg-green-400 p-5 whitespace-nowrap">Social Media — Email Marketing — Digital Advertising</span>

    </div>

  </div>

  <div class="transform -rotate-6 -skew-x-12 mt-40">

    <div data-scroll data-scroll-direction="horizontal" data-scroll-speed="-20" data-scroll-target="#services">

      <span class="text-3xl sm:text-4xl md:text-6xl 2xl:text-7xl bg-green-400 p-5 whitespace-nowrap">Web Development - Motion Design - Graphic Design</span>

    </div>

  </div>

</section>

第 7 节

第七部分将包括一个号召性用语标题。

当我们滚动时，会发生两件事：

• 首先，每次看到标题时，它都会收到一个随机颜色，就像前面的例子一样。

• 其次，我们将通过创建另一个视差 ( lerp ) 效果来为每个字母设置动画。

要实现此功能，我们将执行以下操作：

我们将为标题分配data-scoll、data-scroll-repeat和属性。data-scroll-call="randomizeTextColor"请记住，我们已经遇到了该data-scroll-call="randomizeTextColor"属性。在这里也可以使用它。

我们将为每个字母分配data-scroll、data-scroll-delay和data-scroll-speed="5"属性。所有字母的移动速度都比正常滚动快五倍，但延迟不同。例如，第一个字母会有data-scroll-delay="0.15"while 第二个字母data-scroll-delay="0.095"。这将产生 lerp/staggering 效果。再次，您可以在插件的展示示例中看到 lerp 效果。

以下是我们构建本节的方式：

<section id="contact" class="py-80 border-t-2 border-solid border-gray-50" data-scroll-section>

  <div class="container px-5 mx-auto text-center">

    <h2 class="text-2xl sm:text-5xl font-extrabold py-4" data-scroll data-scroll-repeat data-scroll-call="randomizeTextColor">

      <span class="inline-block" data-scroll data-scroll-delay="0.15" data-scroll-speed="5">h</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.095" data-scroll-speed="5">e</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.085" data-scroll-speed="5">l</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.075" data-scroll-speed="5">l</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.065" data-scroll-speed="5">o</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.055" data-scroll-speed="5">@</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.045" data-scroll-speed="5">g</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.035" data-scroll-speed="5">e</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.035" data-scroll-speed="5">o</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.045" data-scroll-speed="5">r</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.055" data-scroll-speed="5">g</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.065" data-scroll-speed="5">e</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.075" data-scroll-speed="5">.</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.085" data-scroll-speed="5">c</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.095" data-scroll-speed="5">o</span>

      <span class="inline-block" data-scroll data-scroll-delay="0.15" data-scroll-speed="5">m</span>

    </h2>

  </div>

</section>

2.初始化插件

我们已经讨论了插件的许多功能，但我们还没有初始化它。现在让我们这样做。

以下是所有必需的 JavaScript 代码：

const backToTop = document.queryselector(".back-to-top");

const opacityClass = "opacity-0";

const visibilityClass = "invisible";

 

const scroll = new LocomotiveScroll({

  el: document.querySelector("[data-scroll-container]"),

  smooth: true,

  tablet: { smooth: true },

  smartphone: { smooth: true }

});

 

const arrayOfColors = [

  "#0a9396",

  "#005f73",

  "#ae2012",

  "#3d405b",

  "#003049",

  "#bc6c25",

  "#ff006e",

  "#ef476f",

  "#1982c4",

  "#ee964b",

  "#0ead69",

  "#390099",

  "#f6aa1c",

  "#54101d",

  "#2b2c28",

  "#85c7f2",

  "#e15a97",

  "#2b70e3",

  "#b36a5e"

];

 

function getRandomColor() {

  const arrayLength = arrayOfColors.length;

  const randomValue = Math.random() * arrayLength;

  const roundedNumber = Math.floor(randomValue);

  const color = arrayOfColors[roundedNumber];

  return color;

}

 

scroll.on("call", (value, way, obj) => {

  if (value === "randomizeTextColor") {

    if (way === "enter") {

      obj.el.style.color = getRandomColor();

    }

  } else if (value === "toggleBackToTop") {

    if (way === "enter") {

      backToTop.classList.add(opacityClass, visibilityClass);

    } else {

      backToTop.classList.remove(opacityClass, visibilityClass);

    }

  }

});

一些快速说明：

• 我们将在所有设备上保持其流畅的行为。

• 注意call事件回调的参数。第一个（即value）保存data-scroll-call属性的值。使用if条件，我们每次检查哪些值是活动的，然后是相关元素是否进入或离开视口，最后，我们执行所需的操作。

结论

恭喜，伙计们！感谢 Locomotive Scroll，我们设法建立了一个视差滚动网站。希望这个练习能够揭示这个小型库的强大功能，并激励您开始毫不费力地创建高级滚动效果。

以下是我们构建的内容的提醒：

See the Pen  Unique Scrolling Website With Locomotive Scroll & Tailwind CSS by Envato Tuts+ (@tutsplus)  on CodePen.

不要忘记给它一些爱❤️！

在结束之前，让我给你一些想法：

• 与所有技术/工具/库一样，学习机车卷轴的最佳方式是通过其文档。继续，检查已发布的示例并使用您的浏览器工具检查其源代码。此外，请查看其 GitHub 存储库中的问题、项目的活跃程度、其他人如何使用该库，或者只是为了获取一些想法。如果您觉得更冒险，请检查插件的本机代码。在这里，您将了解函数（例如call事件的回调）可以接受哪些参数等。

• 滚动效果会降低网站的性能。除此之外，效果越复杂，它们在不同浏览器/设备上遇到问题的风险就越大。例如，在移动设备上，我会避免使用我们介绍的水平动画。

• 要获得更强大的效果，您可以将 Locomotive Scroll 与GSAP和barba.js等其他动画库结合使用。

最后但同样重要的是，非常感谢 Locomotive 开发人员提供了这个插件！一如既往，非常感谢您的阅读，并确保与我们分享您的机车项目！