Adding animations to a webpage can give it a polished appearance to visitors. One effect that can be added, is a bouncing effect on icons or graphics. In many ways this is much like the 'dock' in Mac OSX. Here's a few examples of the effect that I've done in the past.
Icon Bouncing
Above is a visual of what happens when an icon is hovered over. Notice how the Opera logo is slightly higher than the other icons? Click to see a live demo of this effect >>
HTML Structure
Here's the barebones HTML structure:
<ul id="icons">
<li><img src="image.jpg"></li>
....
</ul>
CSS Code
The UL gets collapsed by floating the LI's left. One thing I'd recommend is giving the LI's a fixed height. Otherwise the list will be growing taller and shorter as users hover over it causing content on the rest of the page to shift around. Also the padding-top should equal the same amount of pixels as the margin-top in the jQuery code.
#icons
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}
#icons li
{
float: left;
height: 100px;
padding: 10px 0px 0px 0px;
}
#icons li img
{
display: block;
border: 0px;
}
jQuery Code
This is actually quite simple. I used a custom animation since jQuery's built in effects cannot accomplish this. In my example below, I changed the marginTop & opacity properties on hover. Also, I added .stop() so that if a user hovers over the elements quickly it won't be lagging behind on the animations.
$(document).ready(function(){
$("#icons img").hover(function(){
$(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
},function(){
$(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
});
});
CSS Transitions
This same effect can be accomplished using CSS Transitions in browsers that support it:
#icons li img
{
-webkit-transition-property: margin-top, opacity;
-webkit-transition-duration: .4s, .4s;
}
#icons li img:hover
{
margin-top: -10px;
opacity: .75;
}
