Fantastic Bouncy Effect using jQuery/JavaScript

Fantastic Bouncy Effect using jQuery/JavaScript

bounce-effect-jquery
Let us see how can we create a Bounce Effect in HTML pages using jQuery. Bounce effect is an effect which resembles bouncing of a ball on floor or on a wall. These kind of effects dramatically improve user experience.
Related: FadeIn / FadeOut Effect jQuery

The Goal

demo-jquery-bounce-all
Our Goal will be to create a HTML page that has 4 boxes (DIVs). Clicking each of these boxes will bounce them is a particular direction. We can control the direction as well as the speed of bouncing element with arguments to the method of jQuery.

Step 1: The HTML Code

Following will be the HTML code for our example:

01
02
03
04
05
06
07
08
09
10
11
12
<table>
<tr>
    <td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
    <td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
    <td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
    <td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>

Step 2: The Stylesheet CSS Code

Just to add some color to our boxes, add following CSS code to your HTML:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
div {
    padding:5px;
    width:150px;
    height:100px;
    text-align:center;
}
#bouncy1 {
    background-color:#FFEE88;
}
#bouncy2 {
    background-color:#EE88FF;
}
#bouncy3 {
    background-color:#EE8888;
}
#bouncy4 {
    background-color:#88EEFF;
}

Step 3: The jQuery/JavaScript Code

Now we will give the actual bounce effect to the demo. We will use jQuery library for this. Also we need to include jQuery UI for bounce effect. For this we will include js files from google apis. Google host the jQuery UI and jQuery core files on their server. We can directly include it from there.

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Also copy following code in your HTML to give final bounce effect.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
    //Add bounce effect on Click of the DIV
    $('#bouncy1').click(function () {
          $(this).effect("bounce", { times:5 }, 300);
    });
    $('#bouncy2').click(function () {
          $(this).effect("bounce", { direction:'left', times:5 }, 300);
    });
    $('#bouncy3').click(function () {
          $(this).effect("bounce", { direction:'right', times:5 }, 300);
    });
    $('#bouncy4').click(function () {
          $(this).effect("bounce", { direction:'down', times:5 }, 300);
    });
    //Bounce all DIVs on click of button
    $("#bounceAll").click(function(){
        $("div").click();
    });
});

Online Demo

View Demo

Download

Advertisements

18 comments on “Fantastic Bouncy Effect using jQuery/JavaScript

  1. I do not even know how I ended up here, but I thought this post was great. I do not know who you are but definitely you are going to a famous blogger if you are not already 😉 Cheers!

  2. Hey there! Someone in my Myspace group shared this site with us so I came to give it a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Outstanding blog and superb design.

  3. I’ll right away grasp your rss feed as I can’t in finding your email subscription link or newsletter service. Do you’ve any? Kindly let me realize in order that I may just subscribe. Thanks.

  4. Hi just thought i would tell you something.. This is twice now i’ve landed on your blog in the last 3 weeks looking for totally unrelated things. Spooky or what?

  5. Wow, incredible blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is great, let alone the content!

  6. Hi there, simply was alert to your weblog thru Google, and located that it is really informative. I’m gonna watch out for brussels. I’ll appreciate in the event you proceed this in future. Numerous folks will likely be benefited out of your writing. Cheers!

  7. Hi there, just became aware of your blog through Google, and found that it’s truly informative. I am going to watch out for brussels. I will be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  8. Attractive section of content. I just stumbled upon your website and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently quickly.

  9. This may be isn’t the best place to ask, I’d like some info on the top chiro because I need great one, I wanted reviews or feedback on Jeff Stansberry DC 72880 Fred Waring Drive Palm Desert, CA 92260 (760) 346-4698

  10. Hello just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Ie. I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know. The design and style look great though! Hope you get the issue resolved soon. Thanks

  11. Every weekend i used to go to see this web page, as i want enjoyment, as this this site conations actually
    fastidious funny material too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s