Fullpage.js

fullPage.js pure Javascript version

preview compatibility

javascript.fullPage.js version License 6Kb gziped!

Invite me to a coffee Donate

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:

  • scrollOverflow
  • verticalCentered
  • continuousVertical
  • loopBottom
  • loopTop
  • normalScrollElements
  • normalScrollElementTouchThreshold
  • controlArrowColor
  • sectionsColor
  • paddingTop
  • paddingBottom
  • fixedElements

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:

javascriptCopy to clipboard
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:

javascriptCopy to clipboard
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:

javascriptCopy to clipboard
//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:

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