Lightweight Full Page Scrolling Engine – ScrollSoGood

Preview:

Description:

ScrollSoGood is a lightweight yet full-featured Vanilla JavaScript library to create full-page scrolling effects for storytelling, presentation, or single-page web app.

More Features:

• Supports both mouse wheel and touch swipe events.
• Keyboard interactions.
• Fully customizable with CSS.
• Supports sub pages.

How to use it:

1. Just insert the ScrollSoGood library into the document and we’re ready to go.

<script src="./ssg.js"></script>

2. Insert pages into the document.

• ssg-container: main container
• ssg-page: CSS selector of pages:
• ssg-child-right: CSS select of sub-pages (right)
• ssg-child-left: CSS select of sub-pages (left)

<div id="ssg-container">
  <!-- first page -->
  <div class="ssg-page">
    Page 1.1
    <button onclick="ssg.revealRight()">Page 1.2</button>
    <div class="ssg-child-right">
      Page 1.2
      <button onclick="ssg.conceal()">Page 1.1</button>
    </div>
  </div>
  <!-- second page -->
  <div class="ssg-page">
    Page 2.1
    <button onclick="ssg.revealLeft()">Page 2.2</button>
    <div class="ssg-child-left">
      Page 2.2
      <button onclick="ssg.conceal()">Page 2.2</button>
    </div>
  </div>
  <!-- more pages here -->
</div>

3. That’s it. You can also use the following API methods to control the scrolling programmatically.

// scroll down
ssg.scrollDown();
// scroll up
ssg.scrollUp();
// scroll to a specific page
ssg.scrollTo(pageNum);
// snap to a specific page
ssg.setIndex(pageNum);
// reveal left sub-page
ssg.revealLeft();
// reveal right sub-page
ssg.revealRight();
// back to the previous page
ssg.conceal();

4. Get & Set methods.

// get page/pages
ssg.getPage();
ssg.getPages();
ssg.getIndex();
// set/get transitions
ssg.setTransitionDuration(time);
ssg.setTransitionFunction(func);
ssg.setScrollTimeout();
ssg.getTransitionDuration();
ssg.getTransitionFunction();
ssg.getScrollTimeout();

5. Event handler.

document.addEventListener('ssg-scroll', function(event) {
  let srcPageNum = event.srcIndex;
  let targetPageNum = event.targetIndex;
  let srcPage = event.srcPage;
  let targetPage = event.targetPage;
  console.log(`Hey we just scrolled a page!`);
  console.log(`We were at page number ${srcPageNum}, which was this node :`);
  console.log(srcPage);
  console.log(`Now we are at page number ${targetPageNum}, which is this node :`);
  console.log(targetPage);    
});