Minimal Fullscreen Vertical Page Slider with jQuery - Rustic.js
File Size: | 13.5 KB |
---|---|
Views Total: | 5792 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Rustic.js is a very small (5kb minified) jQuery one page scroll plugin which turns your long page with sections into a fullscreen, scrolling page slider. The uses can loop through the sections with either mouse wheel or side dots navigation. Also has the ability to snap to next section after user scrolls over the page slider.
How to use it:
1. Download and load the jQuery rustic.js plugin after loading jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="rustic.js"></script>
2. Add page sections into the document as follow.
<div class="main"> <section> Page Content 1</section> <section> Page Content 2</section> <section> Page Content 3</section> </div>
3. Make the section full width and height.
section { min-height: 100vh; max-height: 100vh; width: 100%; position: relative }
4. Initialize the plugin and we're done.
$('.main').rustic();
5. The plugin automatically detects the number of page sections within the document and adds a dots navigation on the right hand side of the webpage. Clicking on that dot will smoothly scroll the user to its corresponding section. Here're sample CSS rules to style the dots navigation.
.rustic-pagination { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 10px } span.rustic-pagination-point { box-sizing: border-box; height: 16px; width: 16px; border-radius: 50%; border: 3px solid #fff; opacity: .4; display: block; margin: 10px 0; cursor: pointer; background: 0 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out } @media screen and (max-width:350px) { span.rustic-pagination-point { height: 12px; width: 12px; margin: 8px 0 } } span.rustic-pagination-point.active { background: #fff; opacity: 1 } span.rustic-pagination-point:hover { opacity: 1 }
6. Default plugin options.
// infinite looping looping: false, defaultCallback: [ function() {}, // before callback function() {} // after callback ], // Specific callback functions before and after slide-change // e.g. // 1: [ // Page number function() { }, // Before function() { } // After ] specificCallbacks: {}, // disable at specific width breakingPoint: 0, // additional easing effects easing: 'easeInOutQuad', // duration of slide transition transitionDuration: 500, // dots navigation pagination: true, paginationWrapper: ['div.rustic-pagination', ''], paginationPoint: ['span.rustic-pagination-point', ''], paginationCss: true, specificPaginationPoints: {}
This awesome jQuery plugin is developed by Pratinav. For more Advanced Usages, please check the demo page or visit the official website.