Minimal Fullscreen Vertical Page Slider with jQuery - Rustic.js

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

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.