jQuery Plugin To Slide In Html Elements On Scroll - scrollSlide
File Size: | 393 KB |
---|---|
Views Total: | 3163 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
scrollSlide is a tiny jQuery & jQuery UI scroll animation plugin which allows you to slide in Html elements as they're scrolled into view. Great for creating animated, interactive and eye-catching single page websites.
See also:
- Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
- Simple jQuery Plugin To Fade Out Panels As You Scroll Down
- jQuery Plugin To Fade In Elements When They Enter The Viewport - Lazy View
Basic Usage:
1. Include jQuery, jQuery UI and the jQuery scrollSlide plugin in your one page website.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script src="js/jquery.scrollslide.js"></script>
2. Add a CSS class to any Html element you wish to apply the slide in animation as it come into view.
<div class="slide-left"> ... </div>
4. Call the plugin and customize the slide in animation.
$('.slide-left').scrollSlide({ direction : 'left', // left, right, up, down speed : 1000, // Speed of animation in ms scrollstart : 200, // Scroll position to start slide in slideback : false // Should object slide back on scroll up? });
This awesome jQuery plugin is developed by bradtraversy. For more Advanced Usages, please check the demo page or visit the official website.