Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS

Plus, to speed up the development process (and to create a responsive layout with minimal effort) we’ll put Tailwind CSS into play.

Getting Started With Locomotive Scroll

To get started with Locomotive Scroll, you have to include the following files in your project:

• The locomotive-scroll.css file or its minified version
• The locomotive-scroll.js file or its minified version

You can download them by visiting its GitHub repo, using a package manager (e.g. npm), or loading the necessary assets through a CDN (e.g. jsDelivr). For this tutorial, we’ll choose the last option.

As discussed in the introduction, for this demonstration, beyond the Locomotive files, we’ll also incorporate Tailwind CSS to create the page layout.

With that in mind, if you look under the Settings tab of our demo pen, you’ll see that there are two external CSS files and one external JavaScript file.

1. Structuring the Page

Locomotive Scroll comes with several different data attributes for manipulating the elements. We’ll use a lot of them, so at the end of this tutorial you’ll have a good grasp of what they do and how you can use them.

Let’s start by specifying a wrapper element with the data-scroll-container attribute. Inside it we’ll place the page sections and a back-to-top link. Later on, we’ll initialize the plugin by targeting this wrapper.

All page sections will have the data-scroll-section attribute. Plus, almost all of them will have an id attribute. This attribute will help us smoothly navigate to target sections through the menu and back-to-top links.

Here’s the initial page structure:

<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="case-studies" class="text-center" 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>

At this point, we’re ready to have a closer look at the important page sections.

Section #1

The first section will include a heading and a paragraph.

Another important thing here: by default, the back-to-top link won’t appear. As we scroll:

• If the heading is in view, the link will be/remain invisible.
• It will appear only when the heading isn’t in view.

To implement this functionality, we’ll pass the data-scroll, data-scroll-repeat, and data-scroll-call="toggleBackToTop" attributes to the heading. Let’s now discuss a little further the role of these attributes:

• The job of the data-scroll attribute is to check if the element is in view. As soon as it appears for the first time, the plugin will add the is-inview class to it. This class won’t be removed any more. Notice also how the plugin modifies the element’s CSS transform property to apply the different effects.

• The job of the data-scroll-repeat attribute is to check repeatedly if the element is in view. The plugin will toggle the is-inview class depending on the element’s position. In our case, we’ll use this attribute only in pair with the data-scroll-call attribute that needs it to work properly.
• The job of the data-scroll-call attribute is to trigger Locomotive’s call event. The attribute value that can be anything we want is passed as a parameter to the event callback and allows us to do stuff when the target element enters or leaves the viewport. It’s a bit hard to explain it with words, so it’s better that you see the JavaScript code. We’ll work with it again in the upcoming sections. As said, remember that we’ll use it together with the data-scroll-repeat attribute.

Here’s how we structure this section:

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

Section #2

The second section will include the menu links.

To navigate smoothly to page sections upon clicking a link, we have to give the data-scroll-to attribute to the links.

Note: we’ll pass the same attribute to the back-to-top link.

Keep in mind that this attribute isn’t part of the docs at the time of this writing. If you’re wondering how I know about its existence, the answer is that I found it by checking the source code of the plugin’s GitHub Page.

Alternatively, if you don’t want to use this attribute, you can achieve this functionality using some JavaScript scrolling methods.

Here’s how we structure this section:

<section class="py-40" data-scroll-section>
  <div class="lg:container px-5 mx-auto">
    <nav>
      <ul class="grid md:grid-flow-col gap-4 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>

Section #3

The third section will include a heading and some text.

As we scroll, we’ll pin the heading to the top. But, for how long? Well, until we scroll past its parent. At that point, the element will disappear as it will then be part of the normal document flow.

To implement this functionality, we’ll assign the data-scroll, data-scroll-sticky, and data-scroll-target="#about" attributes to the heading. Some notes:

• As we already know, the data-scroll attribute will detect if our element is in view.
• The data-scroll-sticky attribute will make it sticky in pair with the data-scroll-target attribute.
• The value of the data-scroll-target attribute will determine the element’s initial and final sticky positions.

Here’s how we structure this section:

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

Section #4

The fourth section will include two Unsplash images.

As we scroll, a parallax effect will happen. To be more specific, the first image will move four times faster than the second one.

To implement this functionality, we’ll pass the data-scroll and data-scroll-speed attributes to the images. The value of the second attribute will determine their scrolling speed. Here we’ll give data-scroll-speed="4.8" to the first image and data-scroll-speed="1.2" to the second one.

Here’s how we structure this section:

<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" width="1000" height="667" src="office1.jpg" alt="" data-scroll data-scroll-speed="4.8">
    </figure>
    <figure>
      <img class="shadow-lg" width="1000" height="1498" src="office2.jpg" alt="" data-scroll data-scroll-speed="1.2">
    </figure>
  </div>
</section>

Section #5

The fifth section will include a heading and two text banners explaining our services.

As we scroll, multiple parallax effects will take place:

• First, the heading’s letters will move at different speeds. Plus, each time they come into view, they will receive a random color from a list of predefined colors.
• Second, the banners will move horizontally in different directions.

To implement this functionality, we’ll do the following:

• Assign the data-scoll, data-scroll-repeat, data-scroll-speed, and data-scroll-call="randomizeTextColor" attributes to the heading’s letters. As we want a parallax effect, the value of the data-scroll-speed attribute will vary for each letter. Remember the role of the data-scroll-call attribute. Here we’re saying: as the letters enter the viewport and Locomotive’s call event fires, do something. If you check the JavaScript section, you’ll notice that at this point the getRandomColor() function is firing. Optionally, here we can also put into action the data-scroll-delay attribute.
• Assign the data-scroll, data-scroll-direction="horizontal", data-scroll-speed, and data-scroll-target="#services" attributes to the banners. The data-scroll-direction="horizontal" will move the elements horizontally on scroll. Next, by giving them opposite values for the data-scroll-speed attribute, we ensure that they will move in different directions (from left to right or right to left). Finally, the data-scroll-target="#services" attribute will determine when the horizontal animations should start. To understand it, try to put the id of another section e.g. data-scroll-target="#office" and reload the page. Notice that the animations start much sooner than they should be.

Here’s how we structure this section:

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

Section #6

The sixth section will include three featured case studies. Each case study will consist of a heading, an image, and a link to the case study’s inner page.

As we scroll, each time a case study’s heading (name) comes into view, the background color of the body element will change based on the value of the data-bg attribute of the associated section.

To implement this functionality, we could again use the call event, which is probably a more efficient approach. But, let’s, this time, take advantage of another event that the library provides, the scroll one. Check the Javascript code for greater detail on how we handle this event.

Regarding the custom attributes:

• We’ll give the data-bg-color attribute to each section with the desired color value.
• We’ll add the data-scroll and data-scroll-repeat attributes to the headings so this functionality is repeated as we scroll. Note that we can customize the time that the library toggles the is-inview class via the data-scroll-offset attribute. 

Here’s how we structure this section:

<section id="case-studies" class="text-center" data-scroll-section>
  <section class="py-32 border-b-2 border-gray-400 sub-section" data-bg-color="#aed9e0">
    <div class="container px-5 mx-auto">
      <h2 class="text-5xl font-extrabold" data-scroll data-scroll-repeat>...</h2>
      <figure class="my-16">
        <img class="shadow-lg mx-auto" width="1000" height="667" src="case-study-1.jpg" alt=""> 
      </figure>
      <a class="text-3xl" href="#" data-scroll>...</a>
    </div>
  </section>
  <!-- two more sections here -->
</section>

If you need the body color to change based on the section’s visibility and not on the heading’s visibility, remove the data-scroll and data-scroll-repeat attributes from the headings, and add them to the sections. Also, make the adjustments needed on the JavaScript code.

Also, you don’t have to stop only on the body color. Depending on your layout, you can change the text color of each section, add animations, etc.

Section #8

The eighth section will include a call-to-action heading.

As we scroll, two things will happen:

• First, each time the heading comes into view, it will receive a random color, like the previous example.
• Second, we’ll animate each letter by creating another parallax (lerp) effect.

To implement this functionality, we’ll do the following:

• Assign the data-scoll, data-scroll-repeat, and data-scroll-call="randomizeTextColor" attributes to the heading. Remember that we’ve already met the data-scroll-call="randomizeTextColor" attribute. It’s perfectly fine to use it here as well.
• Assign the data-scroll, data-scroll-delay, and data-scroll-speed="5" attributes to each letter. All letters will move five times faster than normal scrolling, yet with different delays. For example, the first letter will have data-scroll-delay="0.15" while the second one data-scroll-delay="0.095". This will create the lerp/staggering effect. Again you can see lerp effects in the plugin’s showcase example.

Here’s how we structure this section:

<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. Initializing the Plugin

We’ve talked about many of the plugin’s features, yet we haven’t initialized it. Let’s do that now.

Here’s all the required JavaScript code:

const body = document.body;
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);
    }
  }
});

scroll.on("scroll", (instance) => {
  const visibleSubSectionHeading = document.querySelector(
    ".sub-section h2.is-inview"
  );

  if (visibleSubSectionHeading) {
    const parentSection = visibleSubSectionHeading.parentElement.parentElement;
    body.style.backgroundColor = parentSection.dataset.bgColor;
  } else {
    body.style.backgroundColor = "";
  }
});

Some quick notes:

• We’ll keep its smooth behavior across all devices.
• Notice the parameters of the call event callback. The first one (i.e. value) holds the values of the data-scroll-call attributes. Using an if condition, we check to see which values are active each time, then whether the associated elements enter or leave the viewport, and finally, we perform the desired actions.
• Although not used in our case, the callback of the scroll event accepts one parameter that provides useful info. For example, how much have we scrolled and which elements are currently in view. Use your browser console to see the output of this parameter.

Conclusion

Congrats, folks! We managed to build a parallax scrolling website thanks to Locomotive Scroll. Hopefully, this exercise has revealed the power of this tiny library and motivated you to start creating advanced scrolling effects effortlessly.

Here’s a reminder of what we built:

Don’t forget to give it some love ❤️!

Before closing, let me leave you with a few thoughts:

• As with every technology/tool/library, the best way to learn Locomotive Scroll is through its docs. Go ahead, check the published example and use your browser tools to inspect its source code. Also, check its GitHub repo for issues, how active the project is, how other people use the library, or just for taking some ideas. If you feel more adventurous, check the plugin’s native code. Here you’ll learn things like what parameters a function (e.g. the callback of the call event) can accept, etc.
• Scrolling effects can decrease a website’s performance. Besides this fact, the more complex the effects, the more risk there is they will encounter issues across different browsers/devices. For example, on mobile devices I would avoid using the horizontal animations we covered.
• For even more powerful locomotive scroll effects, you can combine Locomotive Scroll with other animation libraries like GSAP and barba.js.

Have you ever used Locomotive Scroll and Tailwind to build a smooth scrolling website? What other plugins have you tried in that direction?

Last but not least, a big thanks to Locomotive developers for this plugin! As always, thanks a lot for reading, and be sure to share with us your Locomotive projects!

Keep on Scrolling

Check out these other tutorials to learn more about JavaScript and scrolling:

• 

  How to Animate on Scroll With Vanilla JavaScript

  

  Jemima Abu

  15 Mar 2021

• 

  How to Build a Reading Progress Bar With CSS and JavaScript

  

  Adi Purdila

  29 Mar 2021

• 

  CSS Scroll Snap: What Is It? Do We Need It?

  

  Dennis Gaebel

  18 Jan 2018

• 

  Quick Tip: How to Create a Simple Fade Effect on Scroll

  

  George Martsoukos

  29 May 2020

• 

  JavaScript Skills: Create a Responsive Header Animation on Scroll

  

  George Martsoukos

  09 Sep 2020

• 

  How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)

  

  George Martsoukos

  26 May 2021

• 

  How to Hide/Reveal Header Notification Bar on Scroll with JavaScript

  

  George Martsoukos

  05 Jul 2021

• 

  How to Implement Smooth Scrolling With CSS & JavaScript

  

  George Martsoukos

  15 Jun 2021