|
| Trik Membuat Animasi Tooltip Balon dengan jQuery | |
| | Pengirim | Message |
---|
Voldemort BC Security
Jumlah posting : 331 Points : 725 Reputation : 16 Join date : 04.07.11
| Subyek: Trik Membuat Animasi Tooltip Balon dengan jQuery Wed 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 : 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. | |
| | | vir0e5 Top Nubie
Jumlah posting : 29 Points : 43 Reputation : 4 Join date : 18.01.12 Age : 33 Lokasi : ./root/.love.sh
| Subyek: Re: Trik Membuat Animasi Tooltip Balon dengan jQuery Wed Mar 14, 2012 5:54 am | |
| wah berguna nich..nice share bang .. :) | |
| | | Jiban Corporal
Jumlah posting : 159 Points : 390 Reputation : 7 Join date : 09.07.11
| Subyek: Re: Trik Membuat Animasi Tooltip Balon dengan jQuery Sat Mar 17, 2012 11:43 pm | |
| mantap om vold ijin bookmark | |
| | | Sponsored content
| Subyek: Re: Trik Membuat Animasi Tooltip Balon dengan jQuery | |
| |
| | | | Trik Membuat Animasi Tooltip Balon dengan jQuery | |
|
Similar topics | |
|
| Permissions in this forum: | Anda tidak dapat menjawab topik
| |
| |
| Latest topics | » Baktrack TutorialSun Jul 28, 2019 2:26 am by kenta » aplikasi gambas pada linuxTue Apr 30, 2019 10:28 am by kenta » beli linux ubuntu terbaru di surabayaSun Mar 31, 2019 10:08 am by kenta » desain robotFri Jan 19, 2018 1:25 pm by kenta » membuat robot tidak susahFri Jan 19, 2018 1:15 pm by kenta » Salam.. Salam.. Salam..Thu Nov 30, 2017 7:42 am by BumiayuKita» teknologi penyaring udara dan airWed Oct 04, 2017 8:41 am by kenta » [CloudMILD] VPS SSD IIX 2X RAM + Xtra SSD SpaceMon Jul 24, 2017 10:46 am by BumiayuKita» cara menutup akses dari situs negatifTue Apr 04, 2017 1:04 pm by kenta » Aplikasi Google TalkMon Mar 20, 2017 3:00 am by BumiayuKita» Driver buat Webcam PC ?? merknya M-Tech,, Fri Jan 30, 2015 8:51 pm by aelgrim » Portal Blog,,,,,Sun Dec 14, 2014 12:38 am by robofics» Appteknodroid - Seputar Dunia AndroidMon Nov 10, 2014 11:32 pm by Pr0phecy » Software animasi yang agan2 pakeTue Sep 30, 2014 1:11 pm by X_campus » INDO BILLING 6.70 + KEYSun Sep 21, 2014 2:17 pm by abdul halim |
Statistics | Total 12294 user terdaftar User terdaftar terakhir adalah Adlygans
Total 31710 kiriman artikel dari user in 5734 subjects
|
Banner Forum | Dukung forum Blackc0de dengan memasang bannernya.
|
Social Networking |
|
|