explaingit

alvarotrigo/fullpage.js

★ 35,445JavaScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

JavaScript library that turns scrolling into full-screen section snaps, letting you build portfolio and landing pages where each scroll jumps to a new full-window section.

Mindmap

mindmap
  root((fullPage.js))
    What it does
      Full-screen sections
      Snap on scroll
      Touch and keyboard
    How to use
      HTML sections
      Include library
      Auto-snapping
    Customization
      Background colors
      Custom animations
      Navigation dots
    Tech stack
      Plain JavaScript
      React integration
      Vue integration
      Angular integration
    Use cases
      Portfolio sites
      Landing pages
      Presentations

Things people build with this

USE CASE 1

Build a portfolio website where each scroll reveals a new full-screen project showcase.

USE CASE 2

Create a product launch landing page with snapping sections for hero, features, pricing, and testimonials.

USE CASE 3

Design a presentation-style website for agencies or studios with smooth full-screen transitions between sections.

USE CASE 4

Add fullscreen scrolling behavior to an existing site without rewriting scroll handling logic.

Tech stack

JavaScriptReactVueAngular

Getting it running

Difficulty · easy Time to first run · 5min
Free for open-source and non-commercial projects under GPL; commercial license required for paid products.

In plain English

fullPage.js is a JavaScript library for creating websites where scrolling moves between full-screen sections rather than flowing continuously down the page. The problem it solves is that building this kind of "fullscreen scrolling" or "page snapping" behavior from scratch, where each scroll brings you to a completely new section that fills the entire browser window, requires careful handling of scroll events, keyboard navigation, touch gestures, and animations, which is complex to get right across all browsers and devices. With fullPage.js, you structure your HTML into sections and optional slides (for horizontal scrolling within a section), include the library, and the snapping behavior is applied automatically. Navigation between sections can be triggered by scrolling the mouse wheel, swiping on touch devices, pressing arrow keys, or clicking navigation dots that the library generates. You can also set each section to have a different background color or image and add custom scrolling animations. The library works with plain JavaScript and also has official integration packages for the three major frontend frameworks: React, Vue, and Angular. It is dual-licensed, free for open source and non-commercial projects under the GPL license, and commercially licensed for use in paid products. A web developer or designer building a portfolio, landing page, or presentation-style website who wants the visually impactful fullscreen section layout, the kind common on agency and product launch pages, would use fullPage.js. It is written in JavaScript, installed via npm or a CDN script tag, and requires no additional dependencies.

Copy-paste prompts

Prompt 1
Show me how to set up fullPage.js with HTML sections and enable mouse wheel scrolling between full-screen pages.
Prompt 2
How do I add custom animations and background images to each full-screen section in fullPage.js?
Prompt 3
I'm building a React portfolio site. How do I integrate fullPage.js React package and make sections snap on scroll?
Prompt 4
What keyboard and touch gestures does fullPage.js support out of the box for navigating between sections?
Prompt 5
How do I customize the navigation dots that fullPage.js generates and style them to match my design?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.