.:: Blackc0de Forum ::.
Would you like to react to this message? Create an account in a few clicks or log in to continue.

-=Explore The World From Our Binary=-
 
HomeIndeksLatest imagesPendaftaranLogin

 

 Trik Membuat Animasi Tooltip Balon dengan jQuery

Go down 
3 posters
PengirimMessage
Voldemort
BC Security
BC Security
Voldemort


Jumlah posting : 331
Points : 725
Reputation : 16
Join date : 04.07.11

Trik Membuat Animasi Tooltip Balon dengan jQuery Empty
PostSubyek: Trik Membuat Animasi Tooltip Balon dengan jQuery   Trik Membuat Animasi Tooltip Balon dengan jQuery Icon_minitimeWed Mar 07, 2012 4:39 am

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 tooltip balon yang sederhana dengan jQuery.

Hasil dari animasi balon dengan jQuery kita kali ini kurang lebih akan seperti berikut :

[You must be registered and logged in to see this image.]

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 [You must be registered and logged in to see this link.] Buat tag HTML sebagai berikut.

Code:
<!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

Code:
<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(tooltip_balon.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">
Code:
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 :

Code:
<!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(tooltip_balon.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.
Kembali Ke Atas Go down
vir0e5
Top Nubie
Top Nubie
vir0e5


Jumlah posting : 29
Points : 43
Reputation : 4
Join date : 18.01.12
Age : 33
Lokasi : ./root/.love.sh

Trik Membuat Animasi Tooltip Balon dengan jQuery Empty
PostSubyek: Re: Trik Membuat Animasi Tooltip Balon dengan jQuery   Trik Membuat Animasi Tooltip Balon dengan jQuery Icon_minitimeWed Mar 14, 2012 5:54 am

wah berguna nich..nice share bang .. :)
Kembali Ke Atas Go down
Jiban
Corporal
Corporal
Jiban


Jumlah posting : 159
Points : 390
Reputation : 7
Join date : 09.07.11

Trik Membuat Animasi Tooltip Balon dengan jQuery Empty
PostSubyek: Re: Trik Membuat Animasi Tooltip Balon dengan jQuery   Trik Membuat Animasi Tooltip Balon dengan jQuery Icon_minitimeSat Mar 17, 2012 11:43 pm

mantap om vold :jempol

ijin bookmark
Kembali Ke Atas Go down
Sponsored content





Trik Membuat Animasi Tooltip Balon dengan jQuery Empty
PostSubyek: Re: Trik Membuat Animasi Tooltip Balon dengan jQuery   Trik Membuat Animasi Tooltip Balon dengan jQuery Icon_minitime

Kembali Ke Atas Go down
 
Trik Membuat Animasi Tooltip Balon dengan jQuery
Kembali Ke Atas 
Halaman 1 dari 1
 Similar topics
-
» Membuat Validasi Form dengan Jquery
» Membuat Vertical Sliding Info Panel Dengan JQuery
» Tutorial membuat Submit Form Email dengan jQuery dan PHP tanpa harus Refresh Halaman Web
» Membuat Animasi Flash
» Membuat Animasi Menggunakan VB.Net

Permissions in this forum:Anda tidak dapat menjawab topik
.:: Blackc0de Forum ::. :: Webmaster :: Web Development-
Navigasi: