Bouncing Effect with CSS3 Transition or jQuery

Berawal dari tidak ada gawean, back to article on web master tell about "Create An Icon Bouncing Effect With jQuery & CSS" Jika diartikan kedalam bahasa tercinta kita yaitu, membuat ikon dengan efek mentul (lompat) mirip bola. Kalau bola kan ditendang pasti meucleung, nah kalau ini ketika cursor disorot mecleungnya si ikon teh :p
Sebenarnya cuman ingin berbagi pengalaman sajah bahwasannya penggunaan CSS3 sudah sampai sedemikian rupa. Sobat perlu mengingat jikalau properti dari CSS3 ini belom terbaca secara baik oleh semua jenis browse application. Sehingga perlu pengetahuan bagi para pemakai yg memperhatikan friendly looked :D Watch it...

---

Browser Support

The transition property is not supported in any browsers.

Firefox 4 supports an alternative, the -moz-transition property.

Safari and Chrome support an alternative, the -webkit-transition property.

Opera supports an alternative, the -o-transition property.

---

Terbuka dikit deh tabir yg menyelimuti dunia ghaib CSS3 ;)) Yuk kita lanjut ke acara si bouncing icon with CSS3 or jQuery.
Trik ini Beben Koben si Bloglang anu ganteng kalem tea temukan di NealGrosskopf.com that's the great one web :-bd

demo
Terdapat dua versi jika agan agin menginginkan trick tersebut. Kemoooddd :p

1. Use with CSS3 (transition)

KODE CSS

#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;
}
#icons li img
{
transition-property: margin-top;
transition-duration: .7s;
-moz-transition-property: margin-top; /* Firefox 4 */
-moz-transition-duration: .7s; /* Firefox 4 */
-webkit-transition-property: margin-top; /* Safari and Chrome */
-webkit-transition-duration: .7s; /* Safari and Chrome */
-o-transition-property: margin-top; /* Opera */
-o-transition-duration: .7s; /* Opera */
}
#icons li img:hover
{
margin-top: -10px;
opacity: .65;
}

KODE HTML

<ul id="icons">
<li>
<a href="#" title=""><img src="http://YOUR-LINK-IMAGE.png" alt=""></a>
</li>
<li>
<a href="#" title=""><img src="http://YOUR-LINK-IMAGE.png" alt=""></a>
</li>
<li>
<a href="#" title=""><img src="http://YOUR-LINK-IMAGE.png" alt=""></a>
</li>
<li>
<a href="#" title=""><img src="http://YOUR-LINK-IMAGE.png" alt=""></a>
</li>
</ul>

Pada variabel kode CSS diatas Beben terapkan pada html<ul>
<li>...</li>
</ul>

or

<ol>
<li>...</li>
</ol>Kalau sobat mau penerapan pada yg lain, tinggal perhatikan coded variabel CSS-nya.
2. USE CSS with jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type='text/javascript'>
//<![CDATA[
$(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);
});
});
//]]>
</script>

<style>
#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;
}

#icons li img
{
-webkit-transition-property: margin-top, opacity;
-webkit-transition-duration: .4s, .4s;
}
#icons li img:hover
{
margin-top: -10px;
opacity: .65;
}
</style>

Keterangan:

• Script warna biru.
Kalao sudah ada tidak usah dipasang lagi.
• Script warna merah.
Letakan diatas </body>
• Tulisan warna hijau tua.
Variabel CSS yg harus sobat masukin sebelum/diatas code </b:skin>

Pemakaian or kode HTML ketika mau menggunakannya sama dengan diatas :p
Happy CSS3 transition \m/