Author: | bjarkebrodin |
---|---|
Views Total: | 1,212 views |
Official Page: | Go to website |
Last Update: | July 28, 2020 |
License: | MIT |
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); });