jQuery Plugin For Smooth One Page Snap Scrolling - ninjaScroll
File Size: | 14.1 KB |
---|---|
Views Total: | 4158 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ninjaScroll is a full-page snap scrolling plugin that allows you to scroll through a web page with window snapping functionality.
See also:
- jQuery Plugin For Animated Vertical Scroll Snapping - Scrollsnap
- Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify
- jQuery Plugin To Snap To Next Section As You Scroll Through The Webpage - Section Snap
- jQuery Plugin For Smooth Scroll Snapping - panelSnap
- jQuery Snap Scrolling Plugin For Single Page Website - snapscroll
How to use it:
1. Include the jQuery ninjaScroll plugin and other required resources in the web page.
<script src="js/modernizr-2.6.2.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/ninjaScroll.js"></script>
2. Include jQuery mousewheel plugin for mouse wheel support.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.js"></script>
3. Include jQuery easing plugin for advanced easing effects.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
4. Create a set of snap-scrolling sections with the same CSS class 'ss-window'.
<section class="ss-window" id="link1"> <div> <h1>Title 1</h1> <p>Description 1</p> </div> </section> <section class="ss-window" id="link2"> <div> <h1>Title 1</h1> <p>Description 1</p> </div> </section> <section class="ss-window" id="link3"> <div> <h1>Title 1</h1> <p>Description 1</p> </div> </section> ...
4. Optionally, you can create several anchor tags pointing to different sections so the visitor can scroll to desired section manually. Use # link syntax for HREFs and include the 'ss-link' class.
<nav> <ul> <li> <a href="#link1" class="ss-link">Link 1</a> </li> <li> <a href="#link2" class="ss-link">Link 2</a> </li> <li> <a href="#link3" class="ss-link">Link 3</a> </li> </ul> </nav>
5. The sample CSS to style the one page scrolling website.
body { padding: 0; margin: 0 auto; width: 100%; position: relative; text-align: center; font-family: 'Droid Sans', sans-serif; } section { position: relative; } section div { position: absolute; top: 35%; z-index: 10; left: 0; width: 100%; text-align: center; } h1 { font-size: 72px; line-height: 1.3; color: #FFF; font-weight: 300; font-family: 'Oswald', sans-serif; margin: 0; text-shadow: 0 1px 20px rgba(0,0,0,0.35); padding-bottom: 20px; } p { font-weight: 400; color: #FFF; margin: 0; font-size: 24px; text-shadow: 0 1px 20px rgba(0,0,0,0.65); } nav { position: fixed; width: 100%; padding: 24px 0; display: block; background-color: rgba(0,0,0,0.5); z-index: 100; } ul { padding: 0; margin: 0; color: #FFF; text-align: center; } ul li { display: inline-block; padding: 0 10px; } ul a { color: #FFF; text-decoration: none; } ul a:hover, ul a.current { text-decoration: underline; }
This awesome jQuery plugin is developed by JohnnyBash. For more Advanced Usages, please check the demo page or visit the official website.