jQuery Plugin To Snap To Next Section As You Scroll Through The Webpage - Section Snap
File Size: | 280 KB |
---|---|
Views Total: | 19934 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Section Snap is a jQuery plugin designed for one page scrolling website that provides window snapping functionality to a set of content sections. Great for enhancing the scrolling experience as the visitors scroll through your single page website.
See also:
- jQuery Plugin For Animated Vertical Scroll Snapping - Scrollsnap
- Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify
- jQuery Plugin For Smooth Scroll Snapping - panelSnap
- jQuery Snap Scrolling Plugin For Single Page Website - snapscroll
How to use it:
1. Include jQuery javascript library and the jQuery section snap plugin in your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="src/jquery-sectionsnap.js" type="text/javascript"></script>
2. Create a set of sections/panels for your one page scrolling website.
<div class="demo"> <div class="section"></div> <div class="section"></div> <div class="section"></div> </div>
3. Call the plugin on the parent element and set the options.
$(document).ready(function() { $(".demo").sectionsnap({ // time dilay (ms) 'delay': 100, // selector 'selector': ".section", // % of window height from which we start 'reference': .9, // animation time (snap scrolling) 'animationTime': 400, // offset top (no snap before scroll reaches this position) 'offsetTop': 0, // offset bottom (no snap after bottom - offsetBottom) 'offsetBottom': 0 }); });
Change logs:
2014-11-26
- FIX Options: offsetTop and offsetBottom
2014-07-05
- Bug Fix - onScroll - check if is animating
This awesome jQuery plugin is developed by rkuhl. For more Advanced Usages, please check the demo page or visit the official website.