jQuery Plugin To Create Animated Bouncing Elements - Bounce

Bounce is a lightweight jQuery plugin to apply customizable bounce animations with easing effects to any Html elements.

How to use it:

1. Load the necessary JQuery library and the jQuery easing plugin on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

2. Load the jQuery bounce plugin's script after jQuery library.

<script type="text/javascript" src="jquery.bounce.js"></script>

3. Apply a customizable bouncing effect to your image. All the options can be passed via data-* attributes , as in data-distance="200".

<img class="bounce" 
     data-distance="200" 
     data-speed-down="300" 
     data-speed-up="650" 
     src="demo.jpg"
>

4. Initialize the plugin to enable the bounce animation.

$('.bounce').bounce();

5. Full options.

<img class="bounce" 
     data-distance="200" 
     data-speed-down="300" 
     data-speed-up="650" 
     data-gravity="bottom" 
     data-timer="950" 
     data-delay="0" 
     data-loop="10" 
     data-easing-down="easeInQuad" 
     data-easing-up="easeOutQuad" 
     src="demo.jpg"
>

---

This awesome jQuery plugin is developed by ghepting. For more Advanced Usages, please check the demo page or visit the official website.