Simple Full Page Scrolling Plugin For jQuery - scrollview.js
File Size: | 189 KB |
---|---|
Views Total: | 7460 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

scrollview.js is a simple-to-use jQuery plugin used to create smooth vertical or horizontal fullscreen scrolling effect for one page website / web application.
Key Features:
- Navigate through a set of content sections via mouse wheel or side pagination.
- Supports jQuery easing effects
- CSS3 powered scroll animations.
- Allows to loop back to the first section when you reach the last one.
Basic usage:
1. Load the scrollview.js
script after jQuery library but before the closing body tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/scrollview.js"></script>
2. Create content sections with data-index
attributes.
<div id="main"> <section data-index=1 class="page1"></section> <section data-index=2 class="page2"></section> <section data-index=3 class="page3"></section> </div>
3. Add a CSS Reset to your Html page.
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
4. The core CSS/CSS3 styles for the scrollable web page.
html { height: 100%; } body { width: 100%; height: 100%; overflow: hidden; } #main { position: relative; width: 100%; height: 100%; } #main>section { width: 100%; height: 100%; overflow: hidden; } .scroll-pagination { position: absolute; right: 10px; top: 50%; z-index: 5; list-style: none; margin: 0; padding: 0; } .scroll-pagination li a { padding: 10px; display: block; } .scroll-pagination li a:before { content: ''; position: absolute; width: 8px; height: 8px; background: rgba(67,67,67,0.85); border-radius: 50%; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .scroll-pagination li a.active:before { content: ''; position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,0.85); border-radius: 50%; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
5. Add custom background to your sections.
.page1 { background-color: #D870A9; } .page2 { background-color: #3BB0D6; } .page3 { background-color: #DA4453; }
6. Initialize the plugin on document ready.
$("#main").scrollview()
7. Full options and callbacks.
$("#main").scrollview({ // CSS class for container section sectionContainer: "section", // jQuery easing options easing: "ease", // Time between page transitions animationTime: 1000, // Shows a side pagination pagination: true, // Update page URL updateURL: false, // Compatible with old browsers supportOld: false, // Keyboard navigation keyboard: true, // callbacks beforeMove: null, afterMove: null, // Enables infinite loop loop: true, // 'cover' or 'default' swipeAnim:"default", // Disable the plugin when the screen size reaches the value defined below (e.g. '600') responsiveFallback: false, // 'vertical' or 'horizontal' direction: 'vertical' })
Change logs:
2015-03-26
- fixed nav bar's position.
2015-02-05
- fixed for mobile devices.
This awesome jQuery plugin is developed by T-phantom. For more Advanced Usages, please check the demo page or visit the official website.