A lightweight fullpage scrolling framework with zero dependencies. Less than 1KB gzipped. Easily create stunning single-page scrolling websites.
- Touch / Keyboard / Mouse wheel control
- Vertical / Horizontal page scrolling
| Android 4.1+ | Safari 7.1+ | IE 11 | Opera | Chrome | Firefox |
|---|
Install via npm:
npm install fullpage- Include
fullpage.min.js(orfullpage.jsfor development) from thebuilddirectory - Include the CSS file
fullpage.css - Structure your HTML as follows (the element with id
sectionContentis the wrapper — you can customize this id):
<head>
<link rel="stylesheet" href="fullpage.css" />
<script src="fullpage.min.js"></script>
</head>
<body>
<div class="fp-wrap">
<div id="sectionContent" class="fp-section-content">
<div class="fp-section">
<div class="fp-slide-wrap">
<div class="fp-slide">1</div>
<div class="fp-slide">2</div>
<div class="fp-slide">3</div>
</div>
</div>
<div class="fp-section">2</div>
<div class="fp-section">3</div>
</div>
</div>
</body>Basic usage — just call after the page has loaded:
fullpage.init("#sectionContent");For custom configuration:
fullpage.init("#sectionContent", {
threshold: 10, // Scroll trigger threshold, lower = more sensitive
pageSpeed: 600, // Scroll speed in milliseconds
autoScroll: 0, // Auto-scroll interval in ms (0 = disabled)
loopSection: true, // Enable section looping
loopSlide: true, // Enable slide looping
afterLoad: null, // Callback after a page loads
beforeLeave: null, // Callback before leaving a page
afterSlideLoad: null, // Callback after a slide loads
beforeSlideLeave: null, // Callback before leaving a slide
});Triggered when leaving the current page. Inside the callback, this refers to the current section element. leaveIndex is the index of the page being left, and nowIndex is the index of the page being entered.
Triggered after the next page has loaded. Inside the callback, this refers to the loaded section element. afterIndex is the index of the loaded page.
Triggered when leaving the current slide. pageIndex is the current section index, slideNow is the current slide index, and slideAfter is the index of the slide being entered.
Triggered after the next slide has loaded. pageIndex is the current section index, slideIndex is the loaded slide index.
fullpage.init("#sectionContent", {
beforeLeave: function (leaveIndex, nowIndex) {
if (nowIndex === 2) {
console.log("You will leave page 2");
}
console.log(this, leaveIndex, nowIndex);
},
afterLoad: function (afterIndex) {
if (afterIndex === 2) {
console.log("You will go to page 2");
}
console.log(this, afterIndex);
},
beforeSlideLeave: function (pageIndex, slideNow, slideAfter) {
console.log(this, "beforeSlideLeave:", pageIndex, slideNow, slideAfter);
},
afterSlideLoad: function (pageIndex, slideIndex) {
console.log(this, "afterSlideLoad:", pageIndex, slideIndex);
},
});Initialize fullpage. el is the CSS selector for the wrapper element, options is the configuration object. See Initialization.
Scroll to the specified page. index is required, slideIndex is optional.
fullpage.moveTo(1); // Scroll to the first page
fullpage.moveTo(3, 2); // Scroll to the 2nd slide of the 3rd pageScroll vertically to the next page. callback is an optional function.
fullpage.moveToNext(); // Scroll to next page
fullpage.moveToNext(callback); // Scroll to next page, then execute callback
fullpage.moveToNext(callback, params...); // Scroll to next page, execute callback with params
function foo(a, b) {
console.log(a, b);
}
fullpage.moveToNext(foo, 1, 2); // Scroll to next page, outputs 1, 2Scroll vertically to the previous page. Usage is the same as moveToNext(callback).
Scroll horizontally to the next slide (slides left).
Scroll horizontally to the previous slide (slides right).
If you find this project helpful, feel free to buy me a coffee.
The MIT License (MIT)
Copyright (c) 2015-2016 抹桥
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.