fullPage.js

preview compatibility

fullPage.js version License 7Kb gziped!

A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

Invite me to a coffee Donate

Customizations of the plugin and urgent changes are available upon request for some reasonable price. Contact me.

Would you like to have a website using fullpage.js functionality but you don’t know how to use it? I can do it for you for a reasonable price. Contact me.

Introduction

Suggestion are more than welcome, not only for feature requests but also for coding style improvements. Let’s make this a great plugin to make people’s lives easier!

Compatibility

fullPage.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12, etc. It works with browsers with CSS3 support and with the ones which don’t have it, making it ideal for old browsers compatibility. It also provides touch support for mobile phones, tablets and touch screen computers.

Browserstack

Special thanks to Browserstack for supporting fullpage.js.

Usage

As you can see in the example files, you will need to include: - jQuery library. (1.6.0 minimum) - The JavaScript file jquery.fullPage.js (or its minified version jquery.fullPage.min.js) - The css file jquery.fullPage.css

Optionally, when using css3:false, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library (linear and swing ) or the one included by default in fullPage.js (easeInOutCubic).

Install using bower or npm

Optionally, you can install fullPage.js with bower or npm if you prefer:

Terminal: ```shell // With bower bower install fullpage.js

// With npm npm install fullpage.js ```

###Including files: ```html


###Optional use of CDN
If you prefer to use a CDN to load the needed files, fullPage.js is in CDNJS:
https://cdnjs.com/libraries/fullPage.js

###Required HTML structure
Start your HTML document with the compulsory [HTML DOCTYPE declaration](http://www.corelangs.com/html/introduction/doctype.html) on the 1st line of your HTML code. You might have troubles with sections heights otherwise. The examples provided use HTML 5 doctype `<!DOCTYPE html>`.

Each section will be defined with an element containing the `section` class.
The active section by default will be the first section, which is taken as the home page.

Sections should be placed inside a wrapper (`<div id="fullpage">` in this case). The wrapper can not be the `body` element.
```html
<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first. ```html

Some section

In order to create a landscape slider within a section, each slide will be defined by default with an element containing the `slide` class:
```html
<div class="section">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
	<div class="slide"> Slide 4 </div>
</div>

You can see a fully working example of the HTML structure in the demoPage.html file.

###Initialization All you need to do is call the plugin inside a $(document).ready function:

$(document).ready(function() {
	$('#fullpage').fullpage();
});

A more complex initialization with all options set could look like this: ```javascript $(document).ready(function() { $(‘#fullpage’).fullpage({ //Navigation menu: ‘#menu’, lockAnchors: false, anchors:[‘firstPage’, ‘secondPage’], navigation: false, navigationPosition: ‘right’, navigationTooltips: [‘firstSlide’, ‘secondSlide’], showActiveTooltip: false, slidesNavigation: false, slidesNavPosition: ‘bottom’,

	//Scrolling
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 1000,
	scrollBar: false,
	easing: 'easeInOutCubic',
	easingcss3: 'ease',
	loopBottom: false,
	loopTop: false,
	loopHorizontal: true,
	continuousVertical: false,
	continuousHorizontal: false,
	scrollHorizontally: false,
	interlockedSlides: false,
	dragAndMove: false,
	offsetSections: false,
	resetSliders: false,
	fadingEffect: false,
	normalScrollElements: '#element1, .element2',
	scrollOverflow: false,
	scrollOverflowReset: false,
	scrollOverflowOptions: null,
	touchSensitivity: 15,
	normalScrollElementTouchThreshold: 5,
	bigSectionsDestination: null,

	//Accessibility
	keyboardScrolling: true,
	animateAnchor: true,
	recordHistory: true,

	//Design
	controlArrows: true,
	verticalCentered: true,
	sectionsColor : ['#ccc', '#fff'],
	paddingTop: '3em',
	paddingBottom: '10px',
	fixedElements: '#header, .footer',
	responsiveWidth: 0,
	responsiveHeight: 0,
	responsiveSlides: false,

	//Custom selectors
	sectionSelector: '.section',
	slideSelector: '.slide',

	lazyLoading: true,

	//events
	onLeave: function(index, nextIndex, direction){},
	afterLoad: function(anchorLink, index){},
	afterRender: function(){},
	afterResize: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
	onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
}); }); ```

If you are using fullPage.js with anchor links for the sections (using the anchors option or the attribute data-anchor in each section), then you will be able to use anchor links also to navigate directly to a certain slide inside a section.

This would be an example of a link with an anchor: http://alvarotrigo.com/fullPage/#secondPage/2 (which is the URL you will see once you access to that section/slide manually) Notice the last part of the URL ends in #secondPage/2.

Having the following initialization:

$(document).ready(function() {
	$('#fullpage').fullpage({
		anchors:['firstPage', 'secondPage', 'thirdPage']
	});
});

The anchor at the end of the URL #secondPage/2 defines the section and slide of destination respectively. In the previous URL, the section of destination will be the one defined with the anchor secondPage and the slide will be the 2nd slide, as we are using the index 2 for it. (the fist slide of a section has index 0, as technically it is a section).

We could have used a custom anchor for the slide instead of its index if we would have used the attribute data-anchor on the HTML markup like so:

<div class="section">
	<div class="slide" data-anchor="slide1"> Slide 1 </div>
	<div class="slide" data-anchor="slide2"> Slide 2 </div>
	<div class="slide" data-anchor="slide3"> Slide 3 </div>
	<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

In this last case, the URL we would use would be #secondPage/slide3, which is the equivalent to our previous #secondPage/2.

Note that section anchors can also be defined in the same way, by using the data-anchor attribute, if no anchors array is provided.

Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).

Creating smaller or bigger sections

Demo fullPage.js provides a way to remove the full height restriction from its sections and slides. It is possible to create sections which height is smaller or bigger than the viewport. This is ideal for footers. It is important to realise that it doesn’t make sense to have all of your sections using this feature. If there is more than one section in the initial load of the site, the plugin won’t scroll at all to see the next one as it will be already in the viewport.

To create smaller sections just use the class fp-auto-height in the section you want to apply it. It will then take the height defined by your section/slide content.

<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

Responsive auto height sections

A responsive auto height can be applied by using the class fp-auto-height-responsive. This way sections will be full height until the responsive mode gets fired.

State classes added by fullpage.js

Fullpage.js adds multiple classes in different elements to keep a record of the status of the site:

###Lazy Loading Demo fullPage.js provides a way to lazy load images, videos and audio elements so they won’t slow down the loading of your site or unnecessarily waste data transfer. When using lazy loading, all these elements will only get loaded when entering in the viewport. To enable lazy loading all you need to do is change your src attribute to data-src as shown below:

<img data-src="image.png">
<video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
</video>
 ```

If you already use another lazy load solution which uses `data-src` as well, you can disable the fullPage.js lazy loading by setting the option `lazyLoading: false`.

###Auto play/pause embedded media

**Note**: the autoplay feature might not work on some mobile devices depending on the OS and browser (i.e. [Safari on iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/) version < 10.0).

#### Play on section/slide load:
Using the attribute `autoplay` for videos or audio, or the param `autoplay=1` for youtube iframes will result in the media element playing on page load.
In order to play it on section/slide load use instead the attribute `data-autoplay`. For example:

```html
<audio data-autoplay>
	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

Pause on leave

Embedded HTML5 <video> / <audio> and Youtube iframes are automatically paused when you navigate away from a section or slide. This can be disabled by using the attribute data-keepplaying. For example: ```html


###Use extensions
fullpage.js [provides a set of extensions](http://alvarotrigo.com/fullPage/extensions/) you can use to enhance its default features. All of them are listed as [fullpage.js options](https://github.com/alvarotrigo/fullPage.js#options).

Extensions requires you to use the minified file [`jquery.fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.extensions.min.js) that is inside the [`dist` folder](https://github.com/alvarotrigo/fullPage.js/tree/master/dist) instead of the usual fullPage.js file (`jquery.fullpage.js` or `jquery.fullpage.min.js`).

Once you adquire the extension file, you will need to add it before fullPage. For example, if I want to use the Continuos Horizontal extension, I would have include the extension file and then the extensions version of the fullPage file.

```html
<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullpage.extensions.min.js"></script>

An activation key and a license key will be required for each extension. See more details about it here.

Then you will be able to use and configure them as explained in options.

Options

Important It is helpful to understand that the values in the anchors option array correlate directly to the element with the class of .section by it’s position in the markup.

```javascript
$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	menu: '#myMenu'
});

Note: the menu element should be placed outside the fullpage wrapper in order to avoid problem when using css3:true. Otherwise it will be appended to the body by the plugin itself.

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

In order to prevent fullpage.js from creating the scrollbar in certain sections or slides use the class fp-noscroll. For example: <div class="section fp-noscroll">

Methods

You can see them in action here

moveSectionUp()

Demo Scrolls one section up: javascript $.fn.fullpage.moveSectionUp(); — ### moveSectionDown() Demo Scrolls one section down: javascript $.fn.fullpage.moveSectionDown(); — ### moveTo(section, slide) Demo Scrolls the page to the given section and slide. The first slide, the visible one by default, will have index 0. ```javascript /*Scrolling to the section with the anchor link firstSlide and to the 2nd Slide */ $.fn.fullpage.moveTo(‘firstSlide’, 2);


```javascript
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);

//Which is the same as
$.fn.fullpage.moveTo(3);

### silentMoveTo(section, slide) Demo Exactly the same as moveTo but in this case it performs the scroll without animation. A direct jump to the destination. javascript /*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */ $.fn.fullpage.silentMoveTo('firstSlide', 2); — ### moveSlideRight() Demo Scrolls the horizontal slider of the current section to the next slide: javascript $.fn.fullpage.moveSlideRight(); — ### moveSlideLeft() Demo Scrolls the horizontal slider of the current section to the previous slide: javascript $.fn.fullpage.moveSlideLeft(); — ### setAutoScrolling(boolean) Demo Sets the scrolling configuration in real time. Defines the way the page scrolling behaves. If it is set to true, it will use the “automatic” scrolling, otherwise, it will use the “manual” or “normal” scrolling of the site.

$.fn.fullpage.setAutoScrolling(false);

### setFitToSection(boolean) Demo Sets the value for the option fitToSection determining whether to fit the section in the screen or not.

$.fn.fullpage.setFitToSection(false);

### setLockAnchors(boolean) Demo Sets the value for the option lockAnchors determining whether anchors will have any effect in the URL or not.

$.fn.fullpage.setLockAnchors(false);

### setAllowScrolling(boolean, [directions]) Demo Adds or remove the possibility of scrolling through sections/slides by using the mouse wheel/trackpad or touch gestures (which is active by default). Note this won’t disable the keyboard scrolling. You would need to use setKeyboardScrolling for it.


//disabling scrolling
$.fn.fullpage.setAllowScrolling(false);

//disabling scrolling down
$.fn.fullpage.setAllowScrolling(false, 'down');

//disabling scrolling down and right
$.fn.fullpage.setAllowScrolling(false, 'down, right');

### setKeyboardScrolling(boolean, [directions]) Demo Adds or remove the possibility of scrolling through sections by using the keyboard (which is active by default).

//disabling all keyboard scrolling
$.fn.fullpage.setKeyboardScrolling(false);

//disabling keyboard scrolling down
$.fn.fullpage.setKeyboardScrolling(false, 'down');

//disabling keyboard scrolling down and right
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

### setRecordHistory(boolean) Demo Defines whether to record the history for each hash change in the URL.

$.fn.fullpage.setRecordHistory(false);

### setScrollingSpeed(milliseconds) Demo Defines the scrolling speed in milliseconds.

$.fn.fullpage.setScrollingSpeed(700);

### destroy(type) Demo Destroys the plugin events and optionally its HTML markup and styles. Ideal to use when using AJAX to load content.

//destroying all Javascript events created by fullPage.js (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroying all Javascript events and any modification done by fullPage.js over your original HTML markup.
$.fn.fullpage.destroy('all');

### reBuild() Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

$.fn.fullpage.reBuild();

### setResponsive(boolean) Demo Sets the responsive mode of the page. When set to true the autoScrolling will be turned off and the result will be exactly the same one as when the responsiveWidth or responsiveHeight options get fired. javascript $.fn.fullpage.setResponsive(true); — ### responsiveSlides.toSections() Extension of fullpage.js. Requires fullpage.js >= 2.8.5. Turns horizontal slides into vertical sections.

$.fn.fullpage.responsiveSlides.toSections();

### responsiveSlides.toSlides() Extension of fullpage.js. Requires fullpage.js >= 2.8.5. Turns back the original slides (now converted into vertical sections) into horizontal slides again.

$.fn.fullpage.responsiveSlides.toSlides();

Callbacks

Demo You can see them in action here.

###afterLoad (anchorLink, index) Callback fired once the sections have been loaded, after the scrolling has ended. Parameters:

In case of not having anchorLinks defined in the plugin the index parameter would be the only one to use.

Example:

	$('#fullpage').fullpage({
		anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

		afterLoad: function(anchorLink, index){
			var loadedSection = $(this);

			//using index
			if(index == 3){
				alert("Section 3 ended loading");
			}

			//using anchorLink
			if(anchorLink == 'secondSlide'){
				alert("Section 2 ended loading");
			}
		}
	});

###onLeave (index, nextIndex, direction) This callback is fired once the user leaves a section, in the transition to the new section. Returning false will cancel the move before it takes place.

Parameters:

Example:

	$('#fullpage').fullpage({
		onLeave: function(index, nextIndex, direction){
			var leavingSection = $(this);

			//after leaving section 2
			if(index == 2 && direction =='down'){
				alert("Going to section 3!");
			}

			else if(index == 2 && direction == 'up'){
				alert("Going to section 1!");
			}
		}
	});

####Cancelling the scroll before it takes place You can cancel the scroll by returning false on the onLeave callback:

	$('#fullpage').fullpage({
		onLeave: function(index, nextIndex, direction){
			//it won't scroll if the destination is the 3rd section
			if(nextIndex == 3){
				return false;
			}
		}
	});

###afterRender() This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure). See FAQs for more info.

Example:

	$('#fullpage').fullpage({
		afterRender: function(){
			var pluginContainer = $(this);
			alert("The resulting DOM structure is ready");
		}
	});

###afterResize() This callback is fired after resizing the browser’s window. Just after the sections are resized.

Example:

	$('#fullpage').fullpage({
		afterResize: function(){
			var pluginContainer = $(this);
			alert("The sections have finished resizing");
		}
	});

###afterResponsive(isResponsive) This callback is fired after fullpage.js changes from normal to responsive mode or from responsive mode to normal mode.

Parameters:

Example:

	$('#fullpage').fullpage({
		afterResponsive: function(isResponsive){
			alert("Is responsive: " + isResponsive);
		}
	});

###afterSlideLoad (anchorLink, index, slideAnchor, slideIndex) Callback fired once the slide of a section have been loaded, after the scrolling has ended. Parameters:

In case of not having anchorLinks defined for the slide or slides the slideIndex parameter would be the only one to use. Example:

	$('#fullpage').fullpage({
		anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

		afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
			var loadedSlide = $(this);

			//first slide of the second section
			if(anchorLink == 'secondPage' && slideIndex == 1){
				alert("First slide loaded");
			}

			//second slide of the second section (supposing #secondSlide is the
			//anchor for the second slide
			if(index == 2 && slideIndex == 'secondSlide'){
				alert("Second slide loaded");
			}
		}
	});

###onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex) This callback is fired once the user leaves an slide to go to another, in the transition to the new slide. Returning false will cancel the move before it takes place.

Parameters:

Example:

	$('#fullpage').fullpage({
		onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
			var leavingSlide = $(this);

			//leaving the first slide of the 2nd Section to the right
			if(index == 2 && slideIndex == 0 && direction == 'right'){
				alert("Leaving the fist slide!!");
			}

			//leaving the 3rd slide of the 2nd Section to the left
			if(index == 2 && slideIndex == 2 && direction == 'left'){
				alert("Going to slide 2! ");
			}
		}
	});

####Cancelling a move before it takes place You can cancel a move by returning false on the onSlideLeave callback. Same as when canceling a movement with onLeave.

#Reporting issues 1. Please, look for your issue before asking using the github issues search. 2. Make sure you use the latest fullpage.js version. No support is provided for older versions. 3. Use the the Github Issues forum to create issues. 4. An isolated reproduction of the issue will be required. Make use of jsfiddle or codepen for it if possible.

#Contributing to fullpage.js Please see Contributing to fullpage.js

#Changelog To see the list of recent changes, see Releases section.

#Build tasks Want to build fullpage.js distribution files? Please see Build Tasks

#Resources - Wordpress theme 1 - Wordpress theme 2 - CSS Easing Animation Tool - Matthew Lein (useful to define the easingcss3 value) - fullPage.js jsDelivr CDN - fullPage.js plugin for October CMS - fullPage.js wordpress plugin - fullPage.js React implementation - fullPage.js Angular2 directive - fullPage.js angular directive - fullPage.js ember-cli addon - fullPage.js Rails Ruby Gem - Angular fullPage.js - Adaptation for Angular.js v1.x - Integrating fullPage.js with Wordpress (Tutorial)

Who is using fullPage.js

If you want your page to be listed here. Please contact me with the URL.

Google Sony Vodafone British Airways McDonalds EA Mi scribe redd Bugatti Bugatti

You can find another list here.

Donations

Donations would be more than welcome :)

Donate

License

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification )

(The MIT License)

Copyright (c) 2013 Alvaro Trigo <alvaro@alvarotrigo.com>

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.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.