# fullPage.js — Create Beautiful Fullscreen Scrolling Websites

> A JavaScript library for creating fullscreen scrolling websites with smooth snap-to-section navigation, horizontal slides, and lazy loading.

## Install

Save in your project root:

# fullPage.js — Create Beautiful Fullscreen Scrolling Websites

## Quick Use
```bash
npm install fullpage.js
```
```js
import fullpage from 'fullpage.js';
new fullpage('#fullpage', {
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
  navigation: true,
  scrollingSpeed: 700
});
```

## 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/


---
Source: https://tokrepo.com/en/workflows/asset-6a8348ac
Author: AI Open Source