jQuery Plugin For Vertical Fullpage Scrolling Effect - pageScroll

File Size: 9 KB
Views Total: 2951
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Vertical Fullpage Scrolling Effect - pageScroll

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.