fullPage.js pure Javascript version

6Kb gziped!

• Live demo

Invite me to a coffee

Introduction

This is in Alpha version and support for it won't be provided yet. This light version of fullpage.js won't provide some options available in the jQuery version such as:

• responsiveWidth and responsiveHeight
• lockAnchors
• scrollOverflow
• verticalCentered
• continuousVertical
• loopBottom
• loopTop
• normalScrollElements
• normalScrollElementTouchThreshold
• controlArrowColor
• sectionsColor
• paddingTop
• paddingBottom
• fixedElements

And other features such as:

• Any extension
• setAllowScrolling

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.

Usage

As you can see in the demo file, you will need to include:

• javascript.fullPage.js (or its minified version)
• javascript.fullPage.css

Example of initialization:

fullpage.initialize('#fullpage', {
	anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
	menu: '#menu',
	css3:false
});

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

fullpage.initialize('#fullpage', {
	//navigation
	'menu': false,
	'anchors':[],
	'navigation': false,
	'navigationPosition': 'right',
	'navigationColor': '#000',
	'navigationTooltips': [],
	'slidesNavigation': false,
	'slidesNavPosition': 'bottom',
	'scrollBar': false,

	//scrolling
	'css3': true,
	'scrollingSpeed': 700,
	'autoScrolling': true,
	'easingcss3': 'ease',
	'loopHorizontal': true,
	'touchSensitivity': 5,

	//Accessibility
	'keyboardScrolling': true,
	'recordHistory': true,

	//design
	'controlArrows': true,

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


	//events
	'afterLoad': null,
	'onLeave': null,
	'afterRender': null,
	'afterResize': null,
	'afterReBuild': null,
	'afterSlideLoad': null,
	'onSlideLeave': null
});

Functions has the same syntax and functionality than in the jQuery version, but they should be called like so:

//calling a function from the pure Javascript version of fullPage.js
fullpage.moveSectionDown();

In contrast with the calls from the the jQuery version of fullPage.js:

//calling a function from the jQuery version of fullPage.js
$.fn.fullpage.moveSectionDown();