Lightweight Full Page Scroll In Pure JavaScript – fullPage.js

Preview:

Description:

Just another JavaScript plugin that implements the touch-enabled fullscreen one page scroll effect for your single page web application using pure JavaScript.

How to use it:

Place the minified version of fullpage.js into your document when needed.

<script src="/path/to/fullPage.min.js"></script>

Assuming you have several fullscreen page sections like this:

<div id="main">
  <section class="section"></section>
  <section class="section"></section>
  <section class="section"></section>
  <section class="section"></section>
  ...
</div>

Initialize the fullPage.js by calling the FullPage function on the top element.

var page = new FullPage("#main");

Default config options.

var page = new FullPage("#main",{
    // section selector
    section: '.section',
    // animation options
    animationDuration: 700,
    animationTiming: 'ease',
    animationTranform: 'transform',
    // enable side navigation
    pagination: true,
    // enable keyboard navigation
    keyboard: true,
    // enable touch events
    touch: true,
    // touch limit in ms
    touchLimit: 100,
    // infinite loop
    loop: false,
    // callbacks
    onLeave: null,
    afterLoad: null,
    
});

Scroll the webpage to a specific section.

page.moveTo(index);