Scroll Image On Hover - jQuery scrollImageInside.js
File Size: | 4.12 KB |
---|---|
Views Total: | 1834 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
scrollImageInside.js is a jQuery image scroller plugin that smoothly scrolls an image up and down based on the position of the mouse hovering over the image container.
How to use it:
1. Add jQuery library and the scrollImageInside.js script to the webpage.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.scrollimageinside.js"></script>
2. Call the function on the image container and done.
<div id="example"> <img src="1.jpg" alt="" /> </div>
$(function(){ $('#example').scrollimageinside(); });
3. Customize the scroll speed. Default: 250.
$('#example').scrollimageinside({ speed: 900 });
4. Customize the duration of the animation. Default: 15.
$('#example').scrollimageinside({ duration: 50 });
5. Apply an easing equation to the animation. Default: 'linear'.
$('#example').scrollimageinside({ easing: 'ease-in-out' });
6. Set the height of the image. Default: 0 (image's height).
$('#example').scrollimageinside({ height: 0 });
This awesome jQuery plugin is developed by ashwebstudio. For more Advanced Usages, please check the demo page or visit the official website.