fullPage.js

preview compatibility

English | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish#fullpagejs">Español</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#fullpagejs">Français</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian#fullpagejs">Pусский</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs">中文</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs">한국어</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese#fullpagejs"> 日本語</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese#fullpagejs">Português Brasileiro</a> Available for <a href="https://github.com/alvarotrigo/vue-fullpage.js">Vue</a>, <a href="https://github.com/alvarotrigo/react-fullpage">React</a> and <a href="https://github.com/alvarotrigo/angular-fullpage">Angular</a>.

| Created by @imac2

A simple and easy to use library that creates fullscreen scrolling websites (also known as single page websites or onepage sites) and adds landscape sliders inside the sections of the site.

Introduction

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

Compatibility

fullPage.js is fully functional on all modern browsers and with IE 11. If you need to support IE < 11 consider using fullPage.js v3. It also provides touch support for mobile phones, tablets and touch screen computers.

Special thanks to Browserstack for supporting fullpage.js.

License

Commercial license

If you want to use fullPage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application source code to an open source license. [Purchase a Fullpage Commercial License]

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

You will have to provide a prominent notice that fullPage.js is in use. The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification).

Usage

As you can see in the example files, you will need to include:

The JavaScript file fullpage.js (or its minified version fullpage.min.js)
The css file fullpage.css

Optionally, when using css3:false, you can add the easings file in case you want to use other easing effects apart from the one included in the library (easeInOutCubic).

Install using bower or npm

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

Terminal:

// With bower
bower install fullpage.js

// With npm
npm install fullpage.js

Including files

<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Using Webpack, Browserify or Require.js? Check how to use fullPage.js with module loaders.

Optional use of CDN

If you prefer to use a CDN to load the needed files, fullPage.js is in, JSDelivr, UNPKG, CDNJS and others.

Required HTML structure

Start your HTML document with the compulsory HTML DOCTYPE declaration 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.

<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.

<div class="section active">Some section</div>

In order to create a landscape slider within a section, each slide will be defined by default with an element containing the slide class:

<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 simple.html file.

Initialization

Initialization with Vanilla Javascript

All you need to do is call fullPage.js before the closing </body> tag.

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});

Initialization with jQuery

You can use fullpage.js as a jQuery plugin if you want to!

$(document).ready(function() {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true
	});

	// Example of how to use fullpage.js methods
	$.fn.fullpage.setAllowScrolling(false);
});

Vanilla JS example with all options

A more complex initialization with all options set could look like this:


var myFullpage = new fullpage('#fullpage', {
	// Navigation
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition

FullPage.js

Install / Use

README