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 |
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.