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
   
jQuery Plugin To Slide In Html Elements On Scroll - scrollSlide

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:

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.