• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Trik Membuat Animasi Tooltip Balon dengan jQuery

29‘09
June

noimg.jpg

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, 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>

<body>


</body> </html>

Tambahkan Style CSS diatas header dengan Mark Up sebagai berikut


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(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 />
  
  
  
</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.

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial Efek Animasi Visual jQuery untuk Web Desainer - Panel Geser, Mengilangkan Elemen seperti DIV dan Transisi Berantai
  2. Membuat Drop Down Menu Sederhana dengan jQuery
  3. Pengantar dan Penggunaan jQuery pada Website
  4. jQuery 2.0 Sudah Resmi Di Luncurkan
  5. Tutorial membuat Submit Form Email dengan jQuery dan PHP tanpa harus Refresh Halaman Web

Komentar

  • Raja Toko (18 Jan 2016 10:04:09)

    Script ini bisa dipakai untuk website statis (php) tidak ya mas?

  • Imerlina Putri (09 May 2015 10:11:32)

    Ini yg saya cari...

  • Luthfi Wahyudi (02 Mar 2014 08:34:53)

    gan, gimana nih tutorial gk bisa di copy scriptnya, di blog sebelah malah ada demo, ama download script..

  • uzan (02 Dec 2011 05:39:34)

    desain webnya bagus gan,,,bisa share templatnya gax,,?

  • blogonol (29 Jan 2011 01:40:52)

    lebih bagus kalau fungsi balon di jadi slide link, dan di tambahkan dengan image akan lebih menarik kali yaa...ok makasih atas tutorial...semoga bermanfaat juga bagi pengunjung lain...ditunggu kunjungan baliknya

» Muat Komentar Sebelumnya (6 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff