Repolode
Submit
alvarotrigo

alvarotrigo/fullPage.js

A JavaScript library for building fullscreen scrolling websites with sections and horizontal slides.

View on GitHubWebsite
Stars
35,360
Forks
7,061
Open issues
137
Last commit
2 months ago

What is it?

fullPage.js creates single-page, fullscreen scrolling websites, where each section fills the viewport and can be navigated by mouse wheel, touch swipe, keyboard or navigation dots. Sections can contain horizontal sliders, and the library also supports anchor links to specific sections and slides, plus a menu linked to the active section.

It is initialized with a single call on a wrapper element and configured through options covering scrolling speed, easing, looping, lazy loading of media, and responsive fallback to normal scrolling below a set width or height. Methods and callbacks such as onLeave and afterLoad let developers hook into transitions. It works with vanilla JavaScript, as a jQuery plugin, and has wrappers for Vue, React and Angular.

Some advanced features such as cinematic, parallax, slide effects and drag-and-move are distributed as extensions that require a license key. The core library is available under GPL-3.0 with a commercial license option.

Key features

  • 01Fullscreen sections that snap to the viewport on scroll, swipe or keyboard input.
  • 02Horizontal sliders nested inside sections.
  • 03Anchor links for sections and individual slides, with browser history support.
  • 04Menu and navigation dots that reflect the active section.
  • 05Lazy loading for images, video and audio, plus autoplay and pause on leave for embedded media.
  • 06Responsive fallback to normal scrolling below a set width or height.

Use cases

  • Building a one-page marketing or product landing site with full-screen sections.
  • Creating storytelling pages where content advances section by section.
  • Adding slideshow-style panels inside a scrolling page.
  • Using it inside WordPress or framework projects via the Vue, React or Angular wrappers.

Quick start

  1. 1

    Install fullPage.js via npm

    npm install fullpage.js
  2. 2

    Include the CSS and JavaScript files in your HTML page

  3. 3

    Initialize fullPage.js on your wrapper element

Things to know

  • Licensed under GPL-3.0, so proprietary use requires a separate commercial license.
  • Commercial use in closed-source projects requires purchasing a license from the vendor.

Topics

#javascript#fullscreen#scrolling#slider#single-page#animation#frontend-library#fullpage#jquery#mousewheel

FAQ

What is fullPage.js?
A JavaScript library for building fullscreen scrolling websites with sections and horizontal slides. fullPage.js creates single-page, fullscreen scrolling websites, where each section fills the viewport and can be navigated by mouse wheel, touch swipe, keyboard or navigation dots. Sections can contain horizontal sliders, and the library also supports anchor links to specific sections and slides, plus a menu linked to the active section.
Is fullPage.js free to use? What license does it have?
fullPage.js is open source under the GPL-3.0 license. Check the license terms before using it in commercial products.
Is fullPage.js still maintained?
Updated within 6 months. The last commit to fullPage.js was on Sep 20, 2026.
What can I use fullPage.js for?
Building a one-page marketing or product landing site with full-screen sections. Creating storytelling pages where content advances section by section. Adding slideshow-style panels inside a scrolling page. Using it inside WordPress or framework projects via the Vue, React or Angular wrappers.
How do I install fullPage.js?
Install fullPage.js via npm: npm install fullpage.js Include the CSS and JavaScript files in your HTML page Initialize fullPage.js on your wrapper element
Where can I get fullPage.js?
The source code and installation instructions are on GitHub: https://github.com/alvarotrigo/fullPage.js

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects