fullPage.js — Create Beautiful Fullscreen Scrolling Websites

Introduction

fullPage.js is a JavaScript library that simplifies building single-page websites with fullscreen section-by-section scrolling. It provides snap-to-section navigation, horizontal slides, and responsive breakpoints without requiring complex CSS or scroll-hijacking code.

What fullPage.js Does

• Creates fullscreen sections that snap into view on scroll or swipe
• Supports horizontal slides within any vertical section
• Provides callbacks for section enter, leave, and resize events
• Offers responsive fallback that disables fullscreen mode below a breakpoint
• Includes lazy loading for images, videos, and iframes within sections

Architecture Overview

fullPage.js attaches to a container element and transforms its children into viewport-sized sections. A scroll controller intercepts native scroll and touch events, calculates the target section, and animates the transition using CSS transforms with configurable easing. An extension system allows add-ons like parallax, scroll overflow, and continuous scrolling.

Self-Hosting & Configuration

• Install via npm, yarn, or include directly from a CDN
• Wrap sections in a container div and give each section the class section
• Pass an options object with navigation, scrollingSpeed, css3, and anchors
• Enable responsive mode with responsiveWidth or responsiveHeight to fall back to normal scroll
• Add horizontal slides by nesting divs with class slide inside a section

Key Features

• Pure JavaScript with zero dependencies; optional wrappers for React and Vue
• CSS3-powered transforms for 60fps smooth transitions
• Keyboard, mouse wheel, trackpad, and touch gesture support
• URL hash-based deep linking to individual sections and slides
• Extension API for parallax effects, scroll overflow, and drag-and-drop reordering

Comparison with Similar Tools

• Swiper — Focused on carousels and sliders; fullPage.js is purpose-built for fullscreen vertical sections
• ScrollMagic — Scroll-triggered animations; does not provide snap-to-section layout
• Locomotive Scroll — Smooth scroll with parallax; lacks built-in fullscreen snapping
• GSAP ScrollTrigger — Animation-first approach; fullPage.js provides a complete section framework
• pagePiling.js — Same author, simpler API but fewer features and no horizontal slides

FAQ

Q: Is fullPage.js free to use? A: It is free under GPLv3 for open-source projects. Commercial use requires a license key from the author.

Q: Does it work with React or Vue? A: Yes. Official wrappers exist for both React (@fullpage/react-fullpage) and Vue (vue-fullpage.js).

Q: Can I mix fullscreen and normal-scroll sections? A: Yes. Use the scrollOverflow option or the scroll-overflow extension to enable normal scrolling within a section.

Q: How do I link directly to a section? A: Set the anchors option with an array of IDs. fullPage.js updates the URL hash automatically.

Sources

• https://github.com/alvarotrigo/fullPage.js
• https://alvarotrigo.com/fullPage/