How to Create an Animated Spirit Day Presentation With fullPage.js

October 18th 2018 is Spirit Day, something we recognize each year at Tuts+, and on this day we speak out against LGBTQ bullying, especially among LGBTQ youth.

In this tutorial you’ll learn to build an animated Spirit Day presentation with fullPage v3.

Here’s what we’re going to build:

Note: You might remember another tutorial I wrote about fullPage some time ago. That tutorial uses fullPage v2, but as many people still use v2 in their projects there’s no need to commit that tutorial to the archives.

fullPage.js

Vertical and Horizontal Scrolling With fullPage.js

George Martsoukos

What is fullPage.js v3?

fullPage.js is a hugely popular JavaScript library created by Alvaro Trigo. It allows us to build beautiful one-page scrolling websites and applications.

While it’s considered to be a dependency-free JavaScript library, it can also be used as a jQuery plugin just like its previous version (v2).

httpsalvarotrigocomfullPage — alvarotrigo.com/fullPage

Unlike v2, this new version is free under certain conditions. A license is required not only in commercial projects, but also in any non-commercial project that isn’t open sourced and compatible with the GPLv3 license.

It has great browser support and comes with detailed documentation. A big list of working examples can be found on this page.

Beyond the core features, it provides some extra paid features referred to as extensions.

Due to its popularity, a WordPress theme along with wrappers for different JS frameworks (e.g Vue.js wrapper) has also been developed.

Getting Started With fullPage.js v3

To get started with fullPage begin by downloading and installing the following files in your project:

fullpage.css or its minified version
fullpage.js or its minified version

Optionally, you might want to import easings.min.js as well as scrolloverflow.min.js.

You can grab a copy of the corresponding fullPage files by visiting its Github repo, by using a package manager (e.g. npm), or by loading the necessary assets through a CDN (e.g. cdnjs). For this tutorial, I’ll choose the last option and pull everything into CodePen.

For the purposes of this tutorial, beyond the fullPage files, I’ve also incorporated Babel.

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

The required CSS files — The required CSS settings

The required JS files — The required JavaScript settings

1. The HTML

To kick things off we’ll define a wrapper element which contains all the sections. Each section receives the required section class. This class can be customized during the library’s initialization process through the sectionSelector configuration option. All section elements are wrapped inside a .container element.

Here’s the basic HTML structure:

<div id="fullpage">
  <div class="section">
    <div class="container">...</div>
  </div>
  <div class="section">
    <div class="container">...</div>
  </div>
  <div class="section">
    <div class="container">...</div>
  </div>
  <div class="section">
    <div class="container">...</div>
  </div>
  <div class="section">
    <div class="container">...</div>
  </div>
  <div class="section">
    <div class="container">...</div>
  </div>
</div>

2. The CSS

With the HTML in place, let’s look at the CSS styles we’ll apply to our page. For simplicity, we’ll only discuss the most crucial of the available styles.

Firstly, we define two custom properties using CSS variables:

:root {
  --main-white-color: white;
  --main-black-color: black;
}

Next, we’ll specify the styles for our sections:

.section {
  background: linear-gradient(to bottom, #7f2a8b 20%, #a336b2 70%, #b43dc4);
}

.section:last-child {
  background: #7b2987 url(IMG_SRC) no-repeat fixed center / cover;
  background-blend-mode: luminosity;
}

.section .container {
  max-width: 750px;
  width: 85%;
  padding: 15px;
  margin: 0 auto;
  text-align: center;
}

.section .box {
  padding: 10px;
}

.section img {
  display: block;
  max-width: 80%;
  width: 500px;
  margin: 0 auto;
}

.section em {
  font-size: 0.8rem;
}

.section a {
  font-size: 2.5rem;
  padding-bottom: 1px;
  border-bottom: 2px solid;
  text-decoration: none;
}

Finally, we’ll set the rules responsible for the animation of the .box elements (these appear in the second, third, fourth, and fifth sections):

.section .box {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
}

.section .box.is-animated {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

Customizing the Navigation Appearance

It would be nice to customize the appearance of the dots navigation according to our needs.

The left part of the screenshot below shows the default styles, while the right part shows the desired styles:

Plus, we want one more thing. As we navigate to the last section, because we’ll be using a pale image background, the color of the dots navigation should change to black, like this:

The appearance of the dots navigation in the last section

There are two ways to keep track of when the last section is visible.

Firstly, through CSS. The library appends a class of the form fp-viewing-SECTION-SLIDE to the body element depending on the active section/slide.

So as we have six sections, when we leave the fifth section and visit the last one, the body class (starting from fp-viewing-0) will be as follows:

The default class appended to the body when the last section is visible

This method isn’t perfectly flexible. For example, we might add a rule that changes the dots’ color when the sixth (last) section becomes visible:

.fp-viewing-5 #fp-nav ul li a span {
  background: var(--main-black-color);
}

But then, if we add a seventh section, we’d have to modify the aforementioned rule to this one:

.fp-viewing-6 #fp-nav ul li a span {
  background: var(--main-black-color);
}

The second way is through JavaScript (as we’ll cover in the next section) and will give us more flexibility. Through our own instruction a custom fp-last class will be added to the body each time we navigate to the last section.

The custom class appended to the body when the last section is visible

Working under the assumptions discussed above, let’s check out the styles needed for customizing the dots navigation appearance:

#fp-nav ul li {
  margin: 15px 7px;
}

#fp-nav ul li a span {
  background: var(--main-white-color);
  border: 3px solid transparent;
  transition-duration: 0.5s;
}

#fp-nav ul li a span,
#fp-nav ul li:hover a span {
  width: 12px;
  height: 12px;
}

#fp-nav ul li a span,
#fp-nav ul li:hover a span,
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {
  margin: -9px 0 0 -9px;
}

#fp-nav ul li:hover a span,
#fp-nav ul li a.active span {
  background: transparent;
  border-color: var(--main-white-color);
}

.fp-last #fp-nav ul li a span {
  background: var(--main-black-color);
}

.fp-last #fp-nav ul li:hover a span,
.fp-last #fp-nav ul li a.active span {
  background: transparent;
  border-color: var(--main-black-color);
}

Image With CSS Blend Modes and Flexbox Centering

Our last frame is an image which I’ve downloaded from Envato Elements. It’s a full color image, but thanks to some CSS we can apply a blend mode in the browser which mixes the image with a purple background:

The blend mode (luminosity) is applied like so:

.section:last-child {
    background: #7b2987 url(spirit.jpg) no-repeat fixed center / cover;
    background-blend-mode: luminosity;
}

For a better understanding of how CSS blend modes work, check out these tutorials:

3. The JavaScript

At this point we’re ready to turn our attention to some JavaScript.

Initializing fullPage 3

As a first step, we’ll initialize fullPage with the following customizations:

We set the license key as OPEN-SOURCE-GPLV3-LICENSE. If you plan to use fullPage in a commercial project you’ll have to change this value with your own license key.
By default the library doesn’t show the dots navigation. In our case, it will be visible and vertically positioned to the left of the page.
We use JavaScript instead of CSS3 transforms to scroll within sections by setting css3: false. We do this to avoid a conflict which happens in some browsers between the transformed elements and their fixed-positioned child elements. Our last section has a fixed background image.
A scrollbar will appear in case the section’s content is bigger than its height. For this reason we set scrollOverflow: true and load the scrolloverflow.min.js library.

const fullPage = document.getElementById("fullpage");

new fullpage(fullPage, {
  licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
  navigation: true,
  navigationPosition: "left",
  css3: false,
  scrollOverflow: true
});

Working With Section Events

In our project, the following things should happen:

Each time we navigate to a section, we check to see if that section has a .box element. If that’s the case, we give it the is-animated class.
Each time we leave a section, we check to see if that section has a .is-box.is-animated element. In this scenario, we remove the is-animated class from it.
Each time we leave a section, we check to see which is the destination section. If this is the last section, we add the fp-last class to the body element. Otherwise we make sure this class is removed from it.

To satisfy the requirements above, we take advantage of the afterLoad and onLeave events.

The afterLoad event is triggered once a section has been loaded, after the scrolling has ended.

The onLeave event is fired once the user leaves a section, in the transition to the new section.

Here’s the resulting initialization with the aforementioned events:

const body = document.querySelector("body");
const fullPage = document.getElementById("fullpage");
const boxes = document.querySelectorAll(".box");

new fullpage(fullPage, {
  licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
  navigation: true,
  navigationPosition: "left",
  css3: false,
  scrollOverflow: true,
  afterLoad: function(origin, destination, direction) {
    const activeSection = destination.item;
    if (activeSection.querySelector(".box")) {
      activeSection.querySelector(".box").classList.add("is-animated");
    }
  },
  onLeave: function(origin, destination, direction) {
    destination.isLast
      ? body.classList.add("fp-last")
      : body.classList.remove("fp-last");

    if (document.querySelector(".box.is-animated")) {
      document
        .querySelector(".box.is-animated")
        .classList.remove("is-animated");
    }
  }
});

Conclusion

And we’re done! In this tutorial we covered the very basics of fullPage 3. There’s much more we could discuss and I hope that the demo gave you enough inspiration for building something beautiful with this amazing library.

If you’d like to see more advance topics with fullPage (I’m planning something based on WordPress, fullPage, and AJAX if you’re interested?) let me know in the comments below. And don’t forget to take a look at https://www.glaad.org/spiritday to show your support today. Go purple!