fullPage.js - Documentation

Getting Started

Installation

fullPage.js can be installed via npm, yarn, or by directly downloading the files from the official website.

npm:

npm install fullpage.js

yarn:

yarn add fullpage.js

Direct Download: Download the necessary files (fullpage.css and fullpage.js) from the official website and include them in your project.

Basic Setup

Before you begin, ensure you have a basic HTML structure with sections representing your website’s different pages. Each section will become a slide in your fullPage.js website. A simple structure could look like this:

<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

Creating your first fullPage.js website

After setting up your HTML structure, you need to initialize fullPage.js. This is done by including the CSS and JavaScript files and then calling the $.fn.fullpage.init() function. Refer to the next section for details on including the files. After including the files, add the following JavaScript code:

$(document).ready(function() {
    $('#fullpage').fullpage();
});

This code will initialize fullPage.js on the element with the ID “fullpage”.

Including CSS and JavaScript

Include the fullpage.css stylesheet in the <head> of your HTML document and the fullpage.js script in the <body>, ideally just before the closing </body> tag. For npm/yarn users, the paths will depend on your project setup. For direct downloads, adjust the paths accordingly. Example:

<!DOCTYPE html>
<html>
<head>
  <title>My fullPage.js Website</title>
  <link rel="stylesheet" href="path/to/fullpage.css">
</head>
<body>
  <div id="fullpage">
    <!-- Your sections here -->
  </div>
  <script src="path/to/jquery.min.js"></script>  <!--  Make sure you include jQuery -->
  <script src="path/to/fullpage.js"></script>
  <script>
    $(document).ready(function() {
        $('#fullpage').fullpage();
    });
  </script>
</body>
</html>

Remember to replace "path/to/..." with the correct paths to your files. You will also need to include jQuery; fullPage.js relies on it.

Browser Compatibility

fullPage.js aims for broad browser compatibility. It officially supports the latest versions of major browsers including Chrome, Firefox, Safari, Edge, and Opera. While older browsers might work, full functionality and optimal performance are not guaranteed. For best results, target modern browsers. Refer to the official documentation for the most up-to-date compatibility information.

Core Concepts

Sections and Slides

fullPage.js organizes your website content into sections and slides. A section represents a full-screen page, while slides are individual elements within a section, allowing for horizontal scrolling within a section. Each section is defined by a <div> with the class section, and each slide within a section is defined by a <div> with the class slide.

<div id="fullpage">
    <div class="section">
        <div class="slide">Slide 1 of Section 1</div>
        <div class="slide">Slide 2 of Section 1</div>
    </div>
    <div class="section">
        <div class="slide">Slide 1 of Section 2</div>
    </div>
    <div class="section">Section 3</div> </div>

In this example, there are three sections. The first section contains two slides, the second section contains one slide, and the third section contains only one slide (no horizontal scrolling).

fullPage.js provides built-in navigation features, including:

Scrolling

fullPage.js offers smooth and intuitive scrolling between sections and slides. Scrolling behavior can be customized, offering options for:

Responsive Design

fullPage.js adapts to different screen sizes and devices. You can define different settings for different screen sizes and orientations through its options. Consider using media queries in your CSS to style elements appropriately for different viewport sizes. FullPage.js itself handles the adjustments to maintain functionality across various devices.

Events

fullPage.js offers a rich set of events that you can use to trigger custom actions at specific points within the scrolling process. These events include:

You can use these events to execute custom JavaScript code, such as animations or updating content based on the user’s current position in the website. Refer to the official documentation for a complete list and details on how to use each event.

API Reference

Initialization Options

When initializing fullPage.js using $('#fullpage').fullpage(options);, you can pass an object containing various options to customize its behavior. Here are some key options:

Many more options exist for fine-grained control over styling, animations, and functionality. Consult the official documentation for a complete list and descriptions.

Methods

fullPage.js provides several methods to control its behavior after initialization. These methods are called on the fullPage.js instance. Example: $.fn.fullpage.reBuild();

These are some of the commonly used methods. Refer to the official documentation for a full list of available methods and parameters.

Callbacks

Callbacks are functions that you can provide as options during initialization to execute code at specific moments within fullPage.js’s lifecycle. These are often used in conjunction with Events. Example (In Initialization options):

$('#fullpage').fullpage({
    afterLoad: function(origin, destination, direction){
      console.log("Section loaded:", destination.index);
    }
});

Common callbacks include afterLoad, onLeave, afterRender, afterSlideLoad, etc., mirroring many of the events.

Events API

fullPage.js triggers various events throughout its operation, allowing you to integrate custom functionality. These events can be bound using jQuery’s on() method.

To listen for these events, use jQuery’s on() method like this:

$('#fullpage').on('afterLoad', function(origin, destination, direction){
    // Your custom code here
});

Refer to the official documentation for more details on each event’s parameters. Remember to replace placeholders like // Your custom code here with your actual code.

Advanced Usage

Customizing Navigation

Beyond the basic navigation options, fullPage.js allows extensive customization. You can:

Vertical Scrolling

fullPage.js’s default vertical scrolling behavior can be modified extensively:

Horizontal Scrolling

For horizontal scrolling within sections (slides), consider these points:

Fixed Elements

Elements positioned using position: fixed; remain in place while the user scrolls. However, keep these considerations in mind when using fixed elements with fullPage.js:

Responsive Design and Breakpoints

To ensure your fullPage.js website works well on different devices, leverage responsive design techniques:

Accessibility

To improve accessibility for users with disabilities:

Performance Optimization

To maintain good performance, especially on larger websites or devices with limited resources:

Examples and Use Cases

Simple Website

A simple website can benefit from fullPage.js by presenting information across multiple sections, each acting as a distinct page. This is ideal for websites with a small number of pages or those that want a more visually engaging user experience than traditional linear scrolling. Each section can contain text, images, and other content relevant to that page. Navigation can be implemented using the built-in navigation bullets or a custom menu. This approach provides a clean, straightforward design and excellent user experience.

One Page Application

fullPage.js can be used to create a single-page application (SPA) with multiple sections representing different parts of the application. This allows for content organization within a single page, providing a seamless user experience without constant page reloads. Each section can host a different component or view of the application. Using the API, you can trigger actions and updates based on which section is currently visible, enhancing the interactivity and dynamics of the SPA. This structure simplifies navigation and reduces the number of HTTP requests.

Slideshow

fullPage.js can easily create a sophisticated slideshow. Each section can represent a different slide, with multiple slides (using horizontal scrolling) per section for a more complex display. You can incorporate various media types within each slide, making for an impressive visual presentation. Adding custom animations triggered by afterLoad or onLeave events further enhances the slideshow’s dynamic quality. Navigation can be customized to match the desired style of the slideshow.

Portfolio

For showcasing a portfolio of work, fullPage.js creates a visually appealing and intuitive experience. Each section can represent a different project, containing images, videos, descriptions, and links. The smooth scrolling between sections provides a polished feel, drawing attention to each project. Sections can be structured to emphasize key project aspects. This allows for a comprehensive yet navigable display of a creative individual’s or company’s work. Using the API, you can even incorporate interactive elements within each project’s presentation.

eCommerce

While fullPage.js isn’t ideal for complex e-commerce applications, it can enhance aspects of the user experience. You could use it to present product categories in different sections, creating a visually attractive way to browse products. Each section could focus on a specific product category or a set of related products. However, it’s crucial to ensure that core e-commerce functionalities like adding items to a cart, checkout processes, and secure payment processing are handled separately and don’t rely solely on the fullPage.js structure. Consider fullPage.js as a supplementary enhancement to a well-structured e-commerce application rather than the foundation of it.

Troubleshooting

Common Issues

Debugging

Use your browser’s developer tools (usually accessed by pressing F12) to debug your fullPage.js implementation:

Troubleshooting Tips

Support and Community

For additional assistance, consider these resources:

Remember to provide clear and concise details when seeking help, including your fullPage.js version, browser information, relevant code snippets, and a detailed description of the problem you’re encountering.