Smooth Vertical Full Page Slider with jQuery - sailnote.js

File Size: 4.46 KB
Views Total: 4262
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Vertical Full Page Slider with jQuery - sailnote.js

sailnote.js is a jQuery page slider that makes block elements 100% height & width so that the visitor can navigate through them with vertical scrolling effects. The plugin currently supports mouse wheel, up / down keys and touch swipe to scroll through these full page slides

How to use it:

1. Add jQuery library and the JQuery sailnote.js into your html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="sailnote.js"></script>

2. Create block elements (full page slides) for the page slider.

<div class="sn-slide">Section One</div>
<div class="sn-slide">Section Two</div>
<div class="sn-slide">Section Three</div>
<div class="sn-slide">Section Four</div>
<div class="sn-slide">Section Five</div>

3. Initialize the plugin and we're done.

Sailnote.init();

4. You can add custom scrolling effects to each slide as it's scrolled into view.

<!-- specify the effect name via sn-id attribute -->
<div class="sn-slide" sn-id="fadeIn">Section Two</div>
// custom the scrolling effect in the javascript
Sailnote.on('enter', 'fadeIn', function(note){
  note.css('opacity', '0');
  note.animate({'opacity': '0.8'}, 2000);
});

5. You can also add custom next / prev buttons to the full page slides using the following APIs.

// go to next
Sailnote.next();

// go back
Sailnote.back();

This awesome jQuery plugin is developed by kennyt. For more Advanced Usages, please check the demo page or visit the official website.