Touch-friendly Full Page Scroll Animation In JavaScript – scrollpage.js

Preview:

Description:

scrollpage.js is a simple, configurable, and mobile-friendly one page scroll library for landing pages and single-page web applications.

After installing the scrollpage.js library, your visitors can smoothly scroll through your content with just a mouse wheel or a touch swipe, bringing them a more immersive and interactive browsing experience.

How to use:

1. Download and import the scrollpage.min.js library.

<script src="./scrollpage.min.js"></script>

2. Add page items to the document as follows:

<div id="presentation">
  <div id="page1" class="page-item"></div>
  <div id="page2" class="page-item"></div>
  <div id="page3" class="page-item"></div>
</div>

3. Make page items full-page.

#presentation {
  width: 100%;
}
#presentation .page-item {
  width: 100%;
  height: 100vh;
}

4. Add a side nav to the page. OPTIONAL.

<ul class="side-nav">
  <li data-page="#page1"><span>Page</span> 1</li>
  <li data-page="#page2"><span>Page</span> 2</li>
  <li data-page="#page3"><span>Page</span> 3</li>
</ul>

5. Initialize the scrollpage.js.

const scrollPage = new ScrollPage("#presentation", {
      menu: "ul.side-nav",
});

6. Config the full page scroll animation.

const scrollPage = new ScrollPage("#presentation", {
      // easing functions
      animation: "easeInSine",
      // animation speed
      time: 500,
      // show/hide scrollbar
      scrollBar: false,
      // css class name for active page element
      pageSelectedClass:"active",
      // css class name for active menu item
      menuSelectedClass:"active",
      // trigger scrollpage if scrolling content reach bottom or top
      triggerScrollChildren: false,
      // relative to parent height or nor
      relative: false,
});

7. You can also configure different animation options for each page individually.

const scrollPage = new ScrollPage("#presentation", {
      pages:{
        1:{
          animation: "easeInQuart",
          time: 500
        },
        2:{
          animation: "easeOutQuint",
          time: 600
        },
        3:{
          animation: "easeOutCubic",
          time: 700
        }
    }
});

8. Events.

/* {
  sp,// scrollpage object
  currentPage,// current page number (origin page)
  nextPage,// next page number (destination page)
  currentPageName,// current page name (if have `id` otherwise  will olny return page number)
  nextPageName,// next page name (if have `id` otherwise  will olny return page number)
  index,// current page index (start from 0)
}
*/
scrollPage.onScroll(function(e){
  console.log("Leaving from : "+e.currentPageName);
  console.log("Scroll to : "+e.nextPageName);
});
scrollPage.onMove(function(e){
  console.log("Move to : "+e.nextPageName);
});
scrollPage.onStart(function(e){
  console.log("The previous page was : "+e.currentPageName);
  console.log("The next page is : "+e.nextPageName);
});
scrollPage.onFinish(function(e){
  console.log("Arrived at : "+e.currentPageName); 
  console.log("Done Go to : "+e.nextPageName);
});
scrollPage.on('page3',function(e){
  console.log("Event 1 on : "+e.currentPageName);
  console.log("Event 2 on : "+e.nextPageName);
});

9. Scroll to a specific page.

scrollPage.moveTo(page,options)