fullPage.js jQuery Plugin for fullscreen scrolling websites

Alvaro Trigo

Updated on: July 25, 2024

Nowadays is very common to find fullscreen websites as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript.

I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier. (Not that I was not looking for a jQuery carousel)

In an attempt to create something to make things easier for other people trying to do the same, I’ve created a simple plugin which creates the basic structure and functionality to start making a fullscreen scrolling website, also known as single page website.

I’ve named it fullPage.js and It is available at my github account.

Demo View on GitHub

It’s in the first version and I hope to keep improving it with the time. Right now, is capable of:

Scroll within sections using they mouse wheel scroll
Scroll within sections and within sliders using the arrow keys and the pageUp and pageDown keys
Use multiple callbacks
Use touch events for mobile and tablet devices
Add a menu linked to to the sections
Support for CSS3 animations with jQuery fallback
Use of anchor links (#) for each section and slides
Support for scrolling inside each section
Resize the sections size as well as the text when resizing the browser’s window
Autoadjust itself to fit the current section/slide when resizing the browser’s window
Admit some options such as the scrolling easing, the background color of the slides, the scrolling speed, loop options, callbacks and the vertical align of the text within the sections

And all of this being compatible with old browsers such as Internet Explorer 8, 9, Opera 12 etc which already still being used by many users nowadays.

Creating a full scrolling website

The structure is quite simple, adding a section class for each section of the site, and slide for each slide within a section:

<div id="fullpage">
     <div class="section">WHATEVER</div>
     <div class="section">WHATEVER</div>
     <div class="section">
          <div class="slide">Slide 1</div>
          <div class="slide">Slide 2</div>
          <div class="slide">Slide</div>
          <div class="slide">Slide 4</div>
     </div>
     <div class="section">WHATEVER</div>
</div>
Code language: HTML, XML (xml)

To initialise the plugin with default options, is as simple as this:

$(document).ready(function() {
    $('#fullpage').fullpage();
});
Code language: JavaScript (javascript)

Here you have a list of some pages using this plugin.

Documentation & Questions

For more documentation about the plugin, check it at the github repository.
I encourage you to use the issues forum to report bugs or ask any question related with the plugin.
Also, don’t forget to search for your question before opening a new thread as they might have been already asked previously.

Extensions

The project has been growing with the time and due to the diversity of requested features I decided to provide fullpage.js extensions that can be added to enhance its behaviour.

WordPress theme / template

The guys from Themify have created what it seems like a nice theme for wordpress. I encourage you to make use of it if you are planning to integrate fullpage.js and wordpress.