🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ScrolluXJS is a lightweight (6kb minified) jQuery plugin which lets you create a smooth one page scrolling effect for your single page web app.

One-Page-Scrolling

Documentation

ScrolluXJS

Plugin jQuery : Create a onepage scroll for your website 🌅


Preview : alt text



The procedure is simple :

Step 1 :
1. In first time, you need to download the file scrollux.js or scrollux.min.js .
Step 2 :
2. In second time, you need to add the script in your HTML5 :

<script src="./assets/scripts/scrollux.js"></script>

! Important : You must place this script on the end of your html body.

And you need to have jQuery, of course !

Step 3 :
3. Add that line on your script :
var scroll = new Scrollux({});
Options :
4. You can set the style of the buttons list, managed the scrolling time of the animation or add a footer with that parameters :

! Important : if you active the footer section, the last section on your DOM takes this role.

var scroll = new Scrollux({                 overflowY : "hidden",                   overflowX : "hidden",                  ringListColor : "#FFF",                  ringListSize : "9px",                      ringActualSessionColor : "#FFF",                  ringHoverColor : "#FFF",                   setTimeAnimation : 1000,                   footer : false,                            footerSize : "500px"                   });
var scroll = new Scrollux({                 overflowY : "hidden",     // Hides the vertical scrollbar                 overflowX : "hidden",     // Hides the horizontal scrollbar                 ringListColor : "#FFF",   // Changes color of the outline of the buttons list                 ringListSize : "9px",     // Changes size of the buttons list                 ringActualSessionColor : "#FFF", // Changes color of the actual section button hover                 ringHoverColor : "#FFF",  // Changes color of the button over                 setTimeAnimation : 1000,  // Set the time of the scroll animation                 footer : false,           // Set 'true' if you want to have a footer section                 footerSize : "500px"      // You can set the height of your footer             });


If you like it, shares with your friends or with your collaborators ! 😉 👍

You May Also Like