Author: | bagusindrayana |
---|---|
Views Total: | 461 views |
Official Page: | Go to website |
Last Update: | February 10, 2023 |
License: | MIT |
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)