JavaScript Library For One Page Scroll Website – inscroll

Category: Animation , Javascript , Recommended | October 15, 2015
Author: andreymdias
Views Total: 2,516
Official Page: Go to website
Last Update: October 15, 2015
License: MIT

Preview:

JavaScript Library For One Page Scroll Website – inscroll

Description:

inscroll is a standalone JavaScript library used to create a smooth vertical scrolling effect for your one page website or single page application.

How to use it:

Add a set of content sections  to your webpage. Note that each section must have an unique data-page attribute as follow.

<section data-page="section1">
  <h2>Section One</h2>
</section>
<section data-page="section2">
  <h2>Section Two</h2>
</section>
<section data-page="section3">
  <h2>Section Three</h2>
</section>

Load the scrollIt.min.css, polyfill.min.js and scrollIt.min.js into the webpage.

<link href="dist/scrollIt.min.css" rel="stylesheet">
<script src="dist/polyfill.min.js"></script>
<script src="dist/scrollIt.min.js"></script>

Active the one page scrolling effect.

var scrollIt = new ScrollIt();

Possible options.

var scrollIt = new ScrollIt({

    // displays side navigation
    nav: true,

    // transition time
    time: 200,

    // transition delay
    delay: 150,

    // base element
    elem: document.body
    
});

API.

// go to next section
document.querySelector('buttom#next').addEventListener(function(){
    scrollIt.next();
});

// back to previous section
document.querySelector('buttom#previous').addEventListener(function(){
    scrollIt.previous();
});

// scroll to section 2
document.querySelector('buttom#to2').addEventListener(function(){
    scrollIt.scroll(1);
});

You Might Be Interested In:


Leave a Reply