Trik Membuat Animasi Balon dengan jQuery

Blog Categories jQuery | add a Comment »

Dalam membuat website tentunya kita ingin ada sesuatu yang attractif dengan memberikan beberapa animasi yang bagus pada website. Dengan memberikan animasi maka website kita akan tampil lebih hidup dan menarik. Seperti yang saya posting pada blog sebelumnya tentang pengenalan jQuery, kita ketahui bahwa salah satu kegunaan jQuery adalah membuat berbagai varian animasi yang bagus untuk website kita. Animasi website biasanya dibuat oleh flash, tapi kali ini mari kita membuat animasi balon yang sederhana dengan jQuery.

Hasil dari animasi balon dengan jQuery kita kali ini kurang lebih akan seperti berikut, silahkan tunjukan pointer mouse anda pada link-link dibawah ini :

Bagaimana Cara Membuat Aimasi Tersebut

Siapkan Gambar Balon dengan ukuran 110 X 35 px dengan photoshop, atau bila anda malas membuatnya silahkan save image dibawah dengan nama iconbar.png

Buka Dreamweaver anda kemudian buat file HTML baru. Sisipkan framework jQuery pada tag head HTML, jika anda belum memiliki framework jQuery silahkan download pada link ini jQuery Latest. Buat tag HTML sebagai berikut

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery.js"></script>
<body><br /><br /><br />
  
  <div>
    <ul id="balon">
       <li><a href="#">Home<span>START PAGES</span> </a></li>
       <li><a href="#">About<span>WHO I AM</span> </a></li>
       <li><a href="#">Portofolio<span>LOOK AT MY WORK</span> </a></li>
    </ul>
  </div>
  
</body>
</html>

Tambahkan Style CSS diatas header dengan Mark Up sebagai berikut


<style type="text/css" media="screen">
#balon { height:25px; top:0; left:0; width: 300px; }
#balon li { float:left; position:relative; margin-left:7px; width:auto; display: block;}
#balon span {
background: url(iconbar.png) no-repeat 0 0;
width: 110px;
height: 35px;
position: absolute;
top: -20px;
left: -9px;
text-align: left;
text-decoration:none;
padding: 5px;
display: none;
line-height:110%;
color:#FFFFFF;
cursor:default;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 11px;
}
</style>

Selanjutanya kita buat fungsi jQuery sebagai berikut dibawah tag <script type="text/javascript" src="jQuery.js"></script> :


<script type="text/javascript">
jQuery(document).ready(function(){
  $("#balon li").hover(
    function(){
       $(this).find("span").attr({
          "style": 'display:block'
       });
       $(this).find("span").animate({opacity: 1, top: "-35px"}, {queue:false, duration:700});
    }, 
    function(){
       $(this).find("span").animate({opacity: 0, top: "-80px"}, {queue:false, duration:400}, "linear",
       function(){
         $(this).find("span").attr({"style": 'display:none'}); 
       }
    );
  });
});
</script>

Keseluruhan Tag HTML dapat dilihat dibawah :

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  $("#balon li").hover(
    function(){
       $(this).find("span").attr({
          "style": 'display:block'
       });
       $(this).find("span").animate({opacity: 1, top: "-35px"}, {queue:false, duration:700});
    }, 
    function(){
       $(this).find("span").animate({opacity: 0, top: "-80px"}, {queue:false, duration:400}, "linear",
       function(){
         $(this).find("span").attr({"style": 'display:none'}); 
       }
    );
  });
});
</script>
<style type="text/css" media="screen">
#balon { height:25px; top:0; left:0; width: 300px; }
#balon li { float:left; position:relative; margin-left:7px; width:auto; display: block;}
#balon span {
background: url(iconbar.png) no-repeat 0 0;
width: 110px;
height: 35px;
position: absolute;
top: -20px;
left: -9px;
text-align: left;
text-decoration:none;
padding: 5px;
display: none;
line-height:110%;
color:#FFFFFF;
cursor:default;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 11px;
}
</style>
</head>
<body><br /><br /><br />
  
  <div>
    <ul id="balon">
       <li><a href="#">Home<span>START PAGES</span> </a></li>
       <li><a href="#">About<span>WHO I AM</span> </a></li>
       <li><a href="#">Portofolio<span>LOOK AT MY WORK</span> </a></li>
    </ul>
  </div>
  
</body>
</html>

Script yang kita butuhkan untuk membuat animasi balon sudah selesai, Selamat Mencoba dan semoga berhasil menambahkan trik animasi diatas kedalam Website anda. Cara kerja script diatas mungkin akan saya jelaskan nanti berhubung saya mau maintenance web mimosabi dulu.

Trik Membuat Animasi Balon dengan jQuery

Read by Categories

Most Articles Viewed

Recent Comment