jQuery Plugin For Creating Page Scrolling Effects - PageScroll

File Size: 43.2 KB
Views Total: 1506
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Creating Page Scrolling Effects - PageScroll

PageScroll is a jQuery plugin for creating a full window page slider with subtle shrinking (zoom out) page scroll effects. Use mouse drag or touch swipe to scroll between content sections and you will see the magic. Based on CSS3 transitions and 2D transforms.

Basic Usage:

1. Split your web page into several content sections.

<div id="wrapper">
  <div id="div1"> Page 1 </div>
  <div id="div2"> Page 2 </div>
  <div id="div3"> Page 3 </div>
  ...
</div>

2. Include jQuery JavaScript library and the jQuery page scroll plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.pagescroll.min.js"></script> 

3. Call the function on the wrapper element and the plugin will do the rest.

$("#wrap").pageScroll();

4. Available options.

$("#wrap").pageScroll({

// Scroll speed
speed: 20,

// Ratio of zoom-out effects
zoom: 20,

// Bounce while scrolling first/last page
bounce: true

});

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