The Best Solution for Full-Page Design

Save Hours of Development Time with FullPage.js โ€“ Create Beautiful Fullscreen Scrolling Websites in minutes, not weeks.

Get fullPage โ†’
  • Preview
  • JS
  • jQuery
  • React
  • Vue
  • Angular

Trusted by the world's most innovative companies

๐Ÿ‘† Click to see how it's used

Much more than a scroll snap effect

Anchors
Direct link to any section. Boost shareability and SEO.
example.com /#home /#about-us /#contact
Home
About Us
Contact
Infinite Scroll
Scroll that feels endless. Great for storytelling, portfolios, or immersive experiences.
1
2
3
Custom Speed
Control the pace to get a smooth scrolling experience. Match your siteโ€™s vibe.
Section 1
Section 2
Section 3
Speed 700ms
Events
Use callbacks to trigger specific events based on the state of the slider.
Section 1
Section 2
Section 3
Callback Log Initialized...
Developers API
Control the flow of your page dynamically with built-in methods.
moveSectionDown moveTo(1) moveTo(3) setScrollingSpeed(500) getActiveSlide destroy setLockAnchors(true) getScrollY
setAllowScrolling(false) setAllowScrolling(true) setKeyboardScrolling(false) reBuild getActiveSection moveSlideLeft moveSectionUp getScrollX
silentMoveTo(2) setFitToSection(false) setResponsive(true) setRecordHistory(false) fitToSection setKeyboardScrolling(true) moveSlideRight setAutoScrolling(true)
Bidirectional scroll
Build layouts with both vertical and horizontal scrolling. Don't put a limit to your navigation.
Slide 1.1
Slide 1.2
Slide 2.1
Slide 2.2
Section 3
Lazy Load
Only load what users need, when they need it. Ensures performance stays smooth and your bandwidth invoice stays low.
Beautiful Effects
Dazzling slide transitions made simple. Elevate your user experience with minimal setup and maximum impact.

Who is fullPage.js For?

Developers
Build interactive, full-screen websites faster โ€” without reinventing the wheel. Ideal for portfolios, product pages, and modern web apps.
  • Works with React, Vue, Angular, jQuery, WordPress, Webflow...
  • Powerful API with full event control
  • Save hours of coding. Use a production-ready and battle-tested solution.

35,306 Web Developers love fullPage.js!

Hear directly from developers and designers who rely on fullPage.js to save time and deliver beautiful full page websites.

Why fullPage.js? ๐Ÿ’ช

Unlock the power of full-page scroll interactions without reinventing the wheel. fullPage.js handles the hard parts for you.

FeaturefullPage.jsCSS Scroll Snap
Consistent Behaviour Everywhere
fullPage.js ensures your one-page scroll website behaves the same on every platform โ€” whether it's desktop or mobile, Safari, Chrome, or Firefox. No more surprises or broken scroll effects. Just smooth, reliable performance everywhere.
โœ”โŒ
Smooth Mouse Wheel Scroll
Avoid the unepected jumpy behaviour when using CSS snap scroll with a mouse wheel. In fullPage.js, you rather scroll smoothly or you don't scroll at all.
โœ”โŒ
Custom Snap Scroll Speed
A smooth scroll starts with the right speed.

With fullPage.js, you can fine-tune the scroll speed to craft the perfect flow โ€” something native browser snapping just can't do.
โœ”โŒ
Custom Scroll Snap Delay
Set your own scroll snap delay for your vertical scroll website.

fullPage.js gives you full control over the timing, unlike browser-dependent CSS scroll snap that varies across systems.
โœ”โŒ
Scroll a section at a time
No more accidental skips.

fullPage.js scrolls one section at a time โ€” even with fast swipes or trackpad flicks โ€” keeping the experience smooth and content-focused.
โœ”โŒ
Custom Easing Animations
Custom easing lets you choose the scroll animation that fits your styleโ€”unlike CSS Scroll Snap's fixed, rigid jumps. Check out some easing functions here or here. - Demo
โœ”โŒ
Inner Scrollable Sections
Inner scrollable full-screen sections let you add scrollable content within a slide. No more worrying about overflow or cutting things short to fit the screen. - Demo
โœ”Custom
Snap to footers
You can smoothly scroll to non-fullscreen sections like footers without limitations. - Demo
โœ”โŒ
Infinite Scroll
Infinite scroll allows users to keep on scrolling vertically or horizontally when reaching the last slide. It keeps users engaged longer. - Demo
โœ”โŒ
Looping
Looping lets users scroll endlesslyโ€”back to the start when they reach the end. CSS Scroll Snap just stops. - Demo
โœ”โŒ
Transition Effects
You can replace the classic scroll snap effect with over 20+ unique slider animations โ€” adding motion, personality, and a wow factor to every transition. - Demo
โœ”โŒ
Parallax Scroll
fullPage.js lets you easily apply parallax effects between sections and slides, adding depth and a modern, dynamic feel as users scroll. Pperfect for making your site more immersive and visually appealing. - Demo
โœ”โŒ
Callbacks
Callbacks let you run custom code on scroll. Perfect for animations, tracking, or triggering dynamic content at the right moment. - Demo
โœ”โŒ
URL Anchors
URL anchors enable deep linking to specific sections and add to browser historyโ€”great for sharing, bookmarking, and making your content structure clearer with intuitive anchors like #pricing or #features. - Demo
โœ”โŒ
Responsive Design
Define breakpoints to disable snapping, make sections bigger or even switch horizontal slides to vertical (Paid Extension), keeping the experience smooth everywhere. - Demo 1 - Demo 2
โœ”โœ”
JS Framework Integrations
fullPage.js comes with integrations for React, Vue, and Angular so you don't have to build your own custom integration. It's as simple as plug and play.
โœ”Custom
Mouse Click Dragging
Brings touch-like control to desktop. Scroll sections naturally by dragging with the mouse. Demo
โœ”โŒ
Scroll Horizontally With Mouse
Scrolling up or down moves sideways. Perfect for carousels, timelines, or storytelling experiences. - Demo
โœ”โŒ
Record URL History
Record URL history as users scroll so they can navigate with browser back/forward buttons and pick up right where they left off.
โœ”โŒ
Navigation bullets
Built-in navigation bullets so you don't have to build your own. FullPage.js handles clicks, active states, and optional tooltips for you. - Demo
โœ”Custom
Lazy Load
Lazy load sections to boost performance. Load content only when needed, keeping your site fast and smooth. - Demo
โœ”โŒ
CSS State Classes
FullPage.js adds state classes you can target with CSSโ€”making conditional styling effortless based on scroll position, active sections, or responsive mode. - Demo
โœ”โŒ
Autoplay/Pause Media Elements
Autoplay and pause media automaticallyโ€”videos and audio start on section load and pause on leave, keeping user focus and reducing noise without extra scripting. - Demo
โœ”โŒ
Skip Section in Between
Jump straight to the targetโ€”skip animations between non-consecutive fullscreen sections or slides for faster, snappier navigation when needed. - Demo
โœ”โŒ

Use your favorite technologies

Integrate fullPage.js into your stack in minutes.
No matter what tools you use.

Join 35,400 Web Developers

Developers worldwide use fullPage.js slider to save time, money, and create beautiful sites in a snap.

๐Ÿ‘‰ Get It Now!

fullPage.js was an absolute game changer for us. It literally saved us days worth of development time, allowing us to focus on perfecting other critical aspects of our clients project.

ARTEM

Agency Director at CodeDrips

Browser Compatible
100% Browser Compatible
Snap to Footer
Scroll Snap Everywhere
GPU Accelerated
For a Smooth Scroll Experience
Lightweight
No dependencies. Vanilla JS.
Responsive
Mobile Friendly. Conditional breakpoints.
Scroll Inside Sections
Don't be afraid of adding content.
๐Ÿ‘‰ Get It Now!

Websites that stand out using fullPage.js

๐Ÿ‘‰ See Sites Built with fullPage.js

fullPage.js in Numbers

From indie developers to global brands, fullPage.js has helped tens of thousands bring their creative vision to life.