jQuery Plugin For Vertical Fullpage Scrolling Effect - pageScroll
File Size: | 9 KB |
---|---|
Views Total: | 2961 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery fullscreen scrolling plugin for single page website / application that enables the visitor to vertically and smoothly scroll through a set of content panels with mouse, keyboard and touch gesture interaction.
How to use it:
1. Load the jquery.pageScroll.css
in the head section for basic styles.
<link rel="stylesheet" href="dist/jquery.pageScroll.css">
2. Split your website into several content panels.
<div id="main" class="wrapper"> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> </div>
3. Initialize the plugin to enable the one page scrolling effect and generate a circles navigation on the right hand side of your webpage.
$('#main').pageScroll();
4. Available options with defaults.
// CSS selector for content panels pageContainer: '.page', // jQuery easing effect easing: 'ease', // transition speed animationTime: 1000, // side navigation pagination: true, // enable keyboard interaction keyboard: true, // callbacks beforeMove: function() {}, afterMove: function() {}, // auto slide back to the first panel when reaches the last one loop: false
5. A method to scroll to a specified panel manually.
// scroll to the first panel $('#main').moveToPage(0);
This awesome jQuery plugin is developed by huanz. For more Advanced Usages, please check the demo page or visit the official website.