Lightweight Full Page Scroll In Pure JavaScript – fullPage.js

Category: Animation , Javascript , Recommended | August 16, 2016
Author: mverissimo
Views Total: 4,099
Official Page: Go to website
Last Update: August 16, 2016
License: MIT

Preview:

Lightweight Full Page Scroll In Pure JavaScript – fullPage.js

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);

Leave a Reply