Smooth Fullscreen Scrolling Effect with jQuery - ScrollBetweenElements
File Size: | 16.7 KB |
---|---|
Views Total: | 2522 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ScrollBetweenElements is a jQuery plugin designed for single page website / web app that turns a set of elements into fullscreen blocks and allows the visitor to scroll between them with smooth animations.
Features:
- Supports both vertical and horizontal scrolling effects.
- jQuery UI based easing effects.
- Custom scrolling speed.
- 'Hero' section supported.
- Callback functions called once the scroll to the corresponding element.
- You can find more advanced demos in the
examples
folder.
How to use it:
1. Include jQuery library and the jQuery ScrollBetweenElements plugin on your web page.
<script src="jquery.min.js"></script> <script src="ScrollBetweenElements.js"></script>
2. Include jQuery UI if you want more easing effects.
<script src="jquery-ui.min.js"></scrip
3. Include the jQuery mousewheel plugin to enable mouse wheel support across browsers.
<script src="jquery.mousewheel.js"></script>
4. Create a set of DIV elements for content blocks.
<div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> <div id="div4"> </div>
5. Make them 100% height and width.
html, body { width: 100%; height: 100%; padding: 0; margin: 0; } div { background-color: blue; height: 100%; width: 100%; }
6. Initialize the plugin to enable basic one page scrolling effects on your website.
$(document).ready(function(){ $('body,html').animate({ scrollTop: 0 }, 500); ScrollBetweenElements.init(400, "linear", true); ScrollBetweenElements.addElement($("#div1")); ScrollBetweenElements.addElement($("#div2")); ScrollBetweenElements.addElement($("#div3")); ScrollBetweenElements.addElement($("#div4")); });
7. Advanced usages.
// duration: Time between each scrolls // easing: jQuery UI easings. // IsScrollBarHidden: Hides the default scrollbar // HeightCorrection: Correction in pixel of the height value of the scroll. ScrollBetweenElements.init(Duration, Easing, IsScrollBarHidden, HeightCorrection); // element: jQuery selector // isVerticalScroll: true of false // callback: callback function ScrollBetweenElements.addElement(element, isVerticalScroll, callback); // Reset the position ScrollBetweenElements.resetPosition(); // position: the position you wand to scroll to // func: triggered once the setPosition function will be called ScrollBetweenElements.setPosition(position, func);
Change logs:
2015-06-15
- Fix an issue using the keyboard arrows. That made you scroll too fast if you pushed it a multiple time in a row.
This awesome jQuery plugin is developed by Guillaume69. For more Advanced Usages, please check the demo page or visit the official website.