Vertical and Horizontal Scrolling With fullPage.js

These days more and more sites are designed based on the single-page approach (known as single-page or one-page sites). In this article, we’ll explore how to create such an experience for a demo site by taking advantage of fullPage.js.

fullPage.js v4

This tutorial uses an outdated version of fullPage.js (v2), and there aren’t any plans to update the whole tutorial. However, there’s a new demo available (shown below) that uses the latest major plugin version (v4). The core plugin functionality remains more or less the same, so you can continue reading the tutorial and then refer to the new demo. For any differences or things that aren’t covered, refer to the plugin’s documentation.

Have a look at what we’re going to build on this Codepen demo. Additionally, all the files for this demo can be found on this Github repository.

What is fullPage.js?

fullPage.js is a jQuery-based plugin which allows us to build one-page scrolling websites. Created by web developer Alvaro Trigo, as we’ll see in the upcoming sections, it comes with a number of different customization options.

In addition, this plugin provides well-organized documentation with many hands-on examples.

Happily, it works not only in all modern browsers, but also in some older examples like IE 8 and Opera 12.

Finally, you might want to have a look at the Wordpress version of it.

Getting Started with fullPage.js

To get started with fullPage, you have to download and install the following files in your project:

The jQuery library (≥1.6.0)
The jquery.fullPage.css CSS file
The jquery.fullPage.js JS file or its minified version (i.e. jquery.fullPage.min.js)

You can grab a copy of those files by visiting the Github repo, by using a package manager (e.g. Bower), or by loading the necessary assets through a CDN (e.g. cdnjs). For this tutorial, we’ll choose the last option.

Place a link to the CSS file within the <head> of your HTML document:

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

...and the JS scripts before the closing <body> tag:

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

Now, we're ready to dive deeper into the plugin!

Creating Fullpage Sections

First, we have to specify the sections of our site. To do this, we assign the section class to the target elements and wrap them within a container which has a unique identifier. Later, this identifier will be used to initialize an instance of fullPage.

By default, the plugin considers the first section to be the active one. But, if we want, we can change that behavior by adding the active class to the desired section.

Here’s the required HTML structure for our example:

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

Notice that all sections share a common class name (i.e. vertical-scrolling) which we’ve chosen to be different to the predefined one (i.e. section). That being the case, we need to inform the plugin about this change during the initialization process.

Creating Horizontal Slides

Each of these vertically stacked sections can optionally be a horizontal slider with one or more slides. To identify the slides, we apply the slides class to the target elements and nest them within the corresponding section.

Furthermore, it’s important to mention that, technically speaking, the first slide is equal to the parent section. We’ll examine this behavior soon enough!

Back to our example, the code snippet below shows how we set up two slides within our fifth section:

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

Again, as you can see, we’ve given our slides a custom class name (i.e. horizontal-scrolling).

Controling the Site Appearance

We can control the appearance of our sections and slides by taking advantage of the available configuration parameters. One of those parameters is the sectionColor property that gives us an easy way to define the CSS background-color property for each section.

Moreover, we can set our own styles so as to further customize the pages. For example, imagine that we want to apply a full background image to the second section. Here’s how we could accomplish it:

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

The plugin offers many built-in options for moving through sections and slides. Some of those options are activated by default (e.g. mouse wheel and keyboard), while others are manually triggered via the configuration object (e.g. circle dots).

In our project, we want to add extra navigation in the form of dots. In addition, we choose to hide the left and right arrows which normally appear on the slider. So, after enabling the dot navigation, we can change its appearance by overwriting the default styles. Here are the new rules:

#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;
}

And below is a screenshot that demonstrates the changes we’ve made:

default vs custom styles — Default, vs. custom styles

Please note that we include the rules above in our custom stylesheet, hence avoiding changes to the plugin’s CSS file.

Creating Links to Sections and Slides

fullPage.js allows us to change the URL of our site as we scroll through the different sections. To do so, we use the anchors parameter. More specifically, this parameter is an array that holds the anchor links which need to be shown on the URL for each section. For instance, in our example we specify the following anchor links (which should be unique):

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

That done, when we visit the first section, the site URL will have the #firstSection identifier at the end, on the second the URL will end in #secondSection and so on.

In the same way, the plugin also modifies the URL while we scroll through the slides. At this point though, we have to recall that basically the first slide (which has an index of 0) is the related parent section. With that in mind, in our project when we are in the first slide of the fifth section, the URL will end in the #fifthSection anchor link. Loading the second slide of the same section will trigger a URL that ends in #fifthSection/1 because the second slide (which has an index of 1) is actually our “first” slide.

It’s worth mentioning that we can modify the anchors for our slides by adding the data-anchor attribute to them with the desired anchor names (which should also be unique), just like the following example:

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

To see the URLs changing as you scroll, check out the Debug View of our demo.

Linking Menus to Sections and Slides

To better understand how we can link a menu to the fullPage, let’s have a look at our fixed header. The screenshot below shows how it appears:

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

As long as the hamburger menu icon is triggered, the main menu overlay appears:

Here’s the code related to this menu:

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

So, to let fullPage know about the menu, we have to register it by using the menu configuration property. Next we need to link the menu items to the relevant sections. To do this, we add the data-menuanchor attribute to our items with the respective links as the values. As long as those values match, the plugin appends the active class (as we scroll) to the corresponding menu item.

Note that the plugin doesn’t yet append the active class to the slides. To fix this, we can use either jQuery (best solution) or CSS. In our example, we solve this problem by adding the following CSS rule:

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

See the result below:

In actual fact, we didn’t add the active class to the second slide. By taking advantage of the different body classes that the plugin appends to each section and slide, we merely give this item the styles of the active class.

We won’t focus any further on how this menu works, as it’s beyond the scope of this tutorial.

Firing Callbacks for Sections

The afterLoad callback is fired once a section is loaded and the onLeave callback once a user leaves it.

In our project, we hide the vertical dot navigation when the fifth section is loaded:

Here’s how we achieve it:

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

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

Firing Callbacks for Slides

The afterSlideLoad callback is triggered when a slide is loaded and the onSlideLeave callback when the user leaves it.

In our case, we focus on the second slide to perform a number of different actions. For instance, once the slide is loaded we disable the possibility for scrolling up. In addition, we change the background-color property of this slide as well as the appearance of the elements that belong to it.

Part of the code we use is shown below:

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');
    }
}

Initializing the Plugin

This is the last required step in order to trigger the functionality of fullPage. Here, we pass as part of the configuration object all our customizations. Look at the relevant code snippet below:

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

Conclusion

In this tutorial, we enjoyed a quick tour of the fullPage.js jQuery plugin and learned how to build a responsive full-page scrolling site. It’s important to understand that this type of website isn’t suitable for all the cases. Besides their attractive design, they have many restrictions and their maintainability can be difficult, especially for dynamic sites. Plus, this format can cause complications with SEO.

Next Steps

If you’d like to use the demo site as the basis for experimenting with the plugin, I suggest the following challenges:

Incorporate the excellent animate .css library into the project and try to create scroll-based animations.
Use your jQuery knowledge to enable the active class to the second slide (see Linking Menu to Sections and Slides section).

Finally, if you have any experience with one-page sites feel free to share your thoughts with us in the comments below!