# alvarotrigo/fullpage.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/alvarotrigo-fullpage-js).**

35,437 stars · 7,129 forks · JavaScript · GPL-3.0

## Links

- GitHub: https://github.com/alvarotrigo/fullPage.js
- Homepage: http://alvarotrigo.com/fullPage/
- awesome-repositories: https://awesome-repositories.com/repository/alvarotrigo-fullpage-js.md

## Topics

`fullpage` `fullscreen` `javascript` `jquery` `mousewheel` `onepage` `scrolling` `sections` `slide` `slideshow` `snap` `swipe`

## Description

fullPage.js is a JavaScript full-screen scrolling library and layout engine used to create websites composed of vertical sections and horizontal slides that snap to the viewport. It provides a system for organizing web content into full-screen pages with automatic snapping behavior.

The library distinguishes itself through a WebGL transition framework and visual storytelling tools, enabling cinematic effects such as 3D rotations, parallax backgrounds, fading, and water distortion during navigation. It also features a responsive adaptation system that can switch from automatic snapping to standard browser scrolling based on defined viewport breakpoints.

Its broader capabilities include programmatic navigation via API calls, anchor link synchronization with browser history, and the creation of interactive navigation components like dot indicators and synchronized menus. It also supports accessibility features such as keyboard navigation and the ability to disable automatic scrolling on specific internal elements.

## Tags

### User Interface & Experience

- [Full-Screen Viewport Layouts](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts.md) — Builds pages where sections snap to the full height and width of the viewport. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Scroll Snapping Configurations](https://awesome-repositories.com/f/user-interface-experience/layout-containers/scroll-snapping-configurations.md) — Creates a layout where content is divided into full-screen sections that snap to viewport boundaries during scrolling.
- [Viewport-Snapped Sections](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/viewport-snapped-sections.md) — Divides content into vertical sections and horizontal slides that snap to the viewport. ([source](https://github.com/alvarotrigo/fullPage.js/blob/master/README.md))
- [Breakpoint-Based Mode Switching](https://awesome-repositories.com/f/user-interface-experience/layout-containers/scroll-snapping-configurations/breakpoint-based-mode-switching.md) — Implements a responsive system that toggles between automatic snap scrolling and standard browser scrolling based on window dimensions.
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Links a custom navigation menu to page sections to update the active state of menu items during scrolling. ([source](https://github.com/alvarotrigo/fullPage.js/blob/master/README.md))
- [Navigation Plugins](https://awesome-repositories.com/f/user-interface-experience/navigation-plugins.md) — Provides programmatic control over page transitions, anchor linking, and synchronized navigation components.
- [Responsive Slide Adapters](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/vertical-slide-stacks/responsive-slide-adapters.md) — Converts horizontal slides into vertical sections when the page enters a responsive mobile mode. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese))
- [Programmatic Section Navigation](https://awesome-repositories.com/f/user-interface-experience/programmatic-section-navigation.md) — Allows navigating to a specific section or slide using direct commands with optional animation. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Programmatic Viewport Navigation](https://awesome-repositories.com/f/user-interface-experience/programmatic-viewport-navigation.md) — Provides the ability to move the page view to specific sections using programmatic offsets and animated transitions.
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Switches from automatic full-screen snapping to normal browser scrolling when viewport thresholds are met. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french))
- [Viewport Threshold Tracking](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints/viewport-threshold-tracking.md) — Switches from automatic snapping to standard scrolling when viewport dimensions fall below defined breakpoints. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese))
- [Responsive Layout Adapters](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-adapters.md) — Adjusts scrolling behavior and transforms horizontal slides into vertical sections based on window dimensions. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Responsive](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/responsive.md) — Automatically switches from snap-scrolling to standard browser scrolling when viewport dimensions fall below defined thresholds. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Scroll State Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers.md) — Provides APIs to programmatically move the viewport to specific sections or slides with animation or instant jumps. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french))
- [Transition Effects](https://awesome-repositories.com/f/user-interface-experience/transition-effects.md) — Implements cinematic visual transitions such as fading, parallax, and sliding effects between page sections. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean))
- [URL-Synchronized Navigation](https://awesome-repositories.com/f/user-interface-experience/url-synchronized-navigation.md) — Maps unique anchor names to specific sections and slides to enable direct linking and bookmarking via the URL. ([source](https://github.com/alvarotrigo/fullPage.js/tree/3.1.2))
- [Viewport Action Triggers](https://awesome-repositories.com/f/user-interface-experience/action-trigger-components/viewport-action-triggers.md) — Executes custom logic based on the visibility of sections within the viewport during transitions. ([source](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions))
- [Stacked Transitions](https://awesome-repositories.com/f/user-interface-experience/card-layouts/stacked-transitions.md) — Transforms sections into a stacked card layout navigated via scrolling. ([source](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Cards))
- [Content Sectioning](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning.md) — Configures sections to be either exactly full-screen or based on content size for footers and responsive layouts. ([source](https://github.com/alvarotrigo/fullPage.js/tree/3.1.2))
- [Dynamic Section Heights](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/dynamic-section-heights.md) — Allows creating sections with heights determined by content instead of the viewport. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Section Jump Links](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/section-jump-links.md) — Uses anchor links in the URL to jump directly to designated sections or slides. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Viewport Height Overrides](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/viewport-height-overrides.md) — Allows for the creation of sections that are smaller or larger than the viewport by removing full-height restrictions. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Section Transition Monitors](https://awesome-repositories.com/f/user-interface-experience/custom-header-components/section-headers/section-transition-monitors.md) — Allows execution of custom logic during navigation events, specifically before leaving or after entering page sections. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Navigation State Synchronizers](https://awesome-repositories.com/f/user-interface-experience/custom-header-components/section-headers/section-transition-monitors/navigation-state-synchronizers.md) — Synchronizes a navigation menu by updating the active link as the user scrolls through sections. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french))
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides the interaction logic to navigate through sections and slides via mouse or finger dragging. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french))
- [Custom Drag Behaviors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/custom-drag-behaviors.md) — Implements custom drag behaviors to transition between sections or slides on touch devices. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish))
- [Gesture Navigation](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/gesture-navigation.md) — Enables users to move between sections and slides using click-and-drag or swipe gestures on touch devices. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese))
- [Dynamic Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-engines.md) — Recalculates positions and dimensions of all sections to accommodate dynamic content changes or window resizing. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean))
- [Input Method Toggles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-controls/interaction-controls/input-method-toggles.md) — Dynamically enables or disables scrolling via mouse, trackpad, or keyboard based on the application state. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish))
- [Gesture-Based Viewport Navigation](https://awesome-repositories.com/f/user-interface-experience/gesture-based-viewport-navigation.md) — Enables mouse or touch gestures to drag the viewport between different sections and slides. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese))
- [Horizontal Scrolling Utilities](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities.md) — Triggers horizontal movement through slides using the mouse wheel or trackpad. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean))
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Enables navigation between sections and slides using keyboard inputs for improved accessibility. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean))
- [Lifecycle Callbacks](https://awesome-repositories.com/f/user-interface-experience/lifecycle-callbacks.md) — Executes custom code through callbacks triggered by loading, leaving, or resizing sections and slides. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Scrollspy Navigators](https://awesome-repositories.com/f/user-interface-experience/navigation-components/navigation-bars/scrollspy-navigators.md) — Implements dot-based navigation bullets that track scroll position and allow quick jumping between sections. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese))
- [Touch Navigation Interfaces](https://awesome-repositories.com/f/user-interface-experience/navigation-components/touch-navigation-interfaces.md) — Supports navigating between sections and slides using mouse dragging and touch-based swipe gestures. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Navigation Indicators](https://awesome-repositories.com/f/user-interface-experience/navigation-indicators.md) — Displays a visual sidebar of dots that tracks the current position and total number of sections. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Navigation Input Controllers](https://awesome-repositories.com/f/user-interface-experience/navigation-input-controllers.md) — Provides programmatic control to enable or disable scrolling via mouse wheel, touch gestures, or keyboard. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese))
- [Pagination Indicators](https://awesome-repositories.com/f/user-interface-experience/pagination-indicators.md) — Adds visual pagination markers like circles to track the current section or slide. ([source](https://github.com/alvarotrigo/fullPage.js/blob/master/README.md))
- [Parallax Effects](https://awesome-repositories.com/f/user-interface-experience/parallax-effects.md) — Implements depth-perception scrolling by moving background elements relative to the foreground. ([source](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions))
- [Responsive Layout Conversions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/vertical-slide-stacks/responsive-layout-conversions.md) — Transforms horizontal slides into vertical sections when the page enters responsive mobile mode. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian))
- [Parallax Backgrounds](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/parallax-backgrounds.md) — Applies background images that scroll at different speeds to create depth effects. ([source](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax))
- [Navigation Menu Synchronization](https://awesome-repositories.com/f/user-interface-experience/programmatic-section-navigation/navigation-menu-synchronization.md) — Automatically updates the active state of menu items based on the section currently visible in the viewport. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese))
- [Scroll Access Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-access-controllers.md) — Allows dynamically enabling or disabling scrolling and keyboard navigation for specific directions. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese))
- [Scroll Mode Toggles](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/scroll-locking/scroll-mode-toggles.md) — Modifies scrolling configurations in real time to switch between automatic snapping and manual scrolling. ([source](https://github.com/alvarotrigo/fullPage.js/tree/3.1.2))
- [Synchronized](https://awesome-repositories.com/f/user-interface-experience/sliders/synchronized.md) — Allows multiple horizontal sliders across different sections to move in unison when one is shifted. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese))
- [Cinematic Transitions](https://awesome-repositories.com/f/user-interface-experience/transition-effects/cinematic-transitions.md) — Applies cinematic effects like parallax and 3D rotations to create visual storytelling during section transitions.
- [WebGL Transition Engines](https://awesome-repositories.com/f/user-interface-experience/transition-effects/webgl-transition-engines.md) — Utilizes a WebGL framework to apply cinematic visual effects and 3D rotations during section transitions.
- [Wheel-Driven Navigation](https://awesome-repositories.com/f/user-interface-experience/wheel-driven-navigation.md) — Allows users to slide through horizontal content using a mouse wheel or trackpad. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese))

### Part of an Awesome List

- [Carousels and Sliders](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders.md) — Creates side-scrolling slides within vertical sections with looping and wheel navigation. ([source](https://github.com/alvarotrigo/fullPage.js/blob/master/README.md))
- [Animation Plugins](https://awesome-repositories.com/f/awesome-lists/devtools/animation-plugins.md) — Framework for building full-screen scrolling websites.
- [Scroll Effects](https://awesome-repositories.com/f/awesome-lists/devtools/scroll-effects.md) — Plugin for creating fullscreen scrolling websites.

### Graphics & Multimedia

- [Programmatic Animation APIs](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis.md) — Provides APIs to programmatically move the viewport to specific sections with optional animation. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Visual Effects](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects.md) — Implements high-level visual transitions between sections using scaling, opacity, and 3D rotations. ([source](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Slide-Effects))

### Mobile Development

- [Mobile Viewport Adapters](https://awesome-repositories.com/f/mobile-development/mobile-capabilities/mobile-viewport-adapters.md) — Adapts the viewport behavior by switching to standard scrolling when browser dimensions fall below a specific pixel threshold. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean))

### Web Development

- [Programmatic Navigation](https://awesome-repositories.com/f/web-development/programmatic-navigation.md) — Moves the view to specific sections or slides using a precise jump-to API. ([source](https://github.com/alvarotrigo/fullPage.js/blob/master/README.md))
- [Browser History Management](https://awesome-repositories.com/f/web-development/browser-history-management.md) — Syncs the active section or slide with the browser history for back/forward navigation. ([source](https://github.com/alvarotrigo/fullpage.js#readme))
- [Content Transition Effects](https://awesome-repositories.com/f/web-development/content-transition-effects.md) — Implements visual effects like 3D rotations and glitches during section transitions using WebGL. ([source](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Cinematic-Effects))
- [Responsive Layout Systems](https://awesome-repositories.com/f/web-development/responsive-layout-systems.md) — Offers an adaptive layout system that adjusts scrolling behavior based on the user's screen size.
- [URL State Synchronization](https://awesome-repositories.com/f/web-development/url-state-synchronization.md) — Maps active sections and slides to browser history fragments to enable deep linking and back navigation.

### Content Management & Publishing

- [Anchor Links](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/anchor-links.md) — Maps specific sections and slides to URL hashes to enable direct navigation. ([source](https://github.com/alvarotrigo/fullPage.js/blob/master/README.md))

### Software Engineering & Architecture

- [Application Lifecycle Monitors](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-monitors.md) — Provides custom callbacks that trigger when sections are entered, left, rendered, or resized. ([source](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish))
- [Lifecycle Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/lifecycle-callbacks.md) — Triggers custom logic via event-driven hooks during specific transition phases such as entering or leaving sections.