jQuery Plugin For Vertical Fullpage Scrolling Effect - pageScroll
| File Size: | 9 KB |
|---|---|
| Views Total: | 2974 |
| 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.











