Perpustakaan Anshori

Antara Mas.. Wahyu.. dan Anshori…

Efek kedip-kedip simpel dengan jQuery

Posted by anshoriwahyu on April 20, 2013


jquery1Pamulang… nah nah nah.. Akhirnya bikin tulisan lagi nih setelah sekian lama ber (sok)sibuk2 ria. Okeh kali ini gw mau share gimana teknik sederhana bikin animasi kedip-kedip atau istilah keren dalam bahasa jawa sangsakerta kuno itu “BLINK-BLINK“…

Fungsi sederhana sih, tapi bisa dikembangin lagi di script sederhana ini, CSS3 n HTML5 yah disini gw nulisnya. Browser yg support CSS3 untuk text-shadow ini google Chrome PC v.26.0.1410.64 (per tanggal 20032013), mozilla Firefox PC v.19.0 (per tanggal 20032013), Opera PC v.12.15 (per tanggal 20032013), Safari PC v.5.1.7 (per tanggal 20032013). Untuk mobile browser iOS Google Chrome (per tanggal 20032013), Safari (per tanggal 20032013).

Dan sayangnya di IE PC v.8 itu ga jalan, n then gw lom coba yg IE PC v.9 jalan atau kagak. Tapi feeling gw sih jalan. Mobile browser iOS Opera ga jalan,  IE di windowsMobile juga ga jalan, dan untuk mobile browser di Android gw lom coba juga secara gw lom dapet hape robot ijo yg cocok..😀 okeh lanjut deh ke script jQuerynya…

<style>
body {background-color: #000;}
#badanUtama {margin-top: 25%; text-align: center;}
#badanUtama h1 {color: #000; text-shadow:0 0 10px #ff0000; font-family: ‘Orbitron’, sans-serif; font-size: 20px;}
</style>
<div id=”badanUtama”>
<h1 class=”bayangan”>anshoriDOTnet | Mas Wahyu Anshori</h1>
</div>
<script>
$(function(){
$(window).load(function(){
var kedip = $(“#badanUtama”);
ulangUlang();
function ulangUlang(){
kedip.fadeOut(1000, function(){
kedip.fadeIn(1000, ulangUlang);
});
}
});
});
</script>

Okeh masuk ke penjelasannya yah.. Kalo ada sanggahan sumonggo diterima masukannya😉 …. Basmallah..

CSS3 untuk bayangan warna merah itu ada di bagian STYLE #badanUtama h1 {color: #000; text-shadow:0 0 10px #ff0000; font-family: ‘Orbitron’, sans-serif; font-size: 20px;} Perhatikan bagian yg gw BOLD di TEXT-SHADOW

Nah sekarang penjelasan masuk ke bagian jQuerynya…

$(window).load(function() >> menunjukan bahwa saat yg script yg di dalem browser “$(window)” udah dibaca semua dilakukan proses nge-load script selanjutnya “.load(function()

var kedip = $(“#badanUtama”); >> disini variabel yg dipake untuk nyingkat selektor ID badanUtama, yg nantinya dipake biar ga ribet nulis lengkap selektor ID ini…

ulangUlang(); >> nah ini yg dijalankan selanjutnya setelah $(window) dan var kedip, ulangUlang() ini berupa fungsi yg nanti dijalankan, dimana fungsi itu di deklarasikan setelah ulangUlang() ini…

function ulangUlang() {kedip.fadeOut(1000, function() {kedip.fadeIn(1000, ulangUlang);});} >> nah ini deklarasi dari fungsi ulangUlang() tadi.. Yuk gw bahas satu per satu.. dimana saat browser udah ke load semua “$(window)” dan jQuery menjalankan perintah untuk me-load script “.load(function)” maka text di bagian ID badanUtama “<h1>anshoriDOTnet | Mas Wahyu Anshori</h1>” pun muncul… pas text yang tadi gw bikin var kedip biar menyingkat $(“#badanUtama”) itu muncul baru deh dikasih effect ngilang (.fadeOut) dengan timing 1000 millisecond “{kedip.fadeOut(1000,” nah setelah ngilang itu text disini ada fungsi CALLBACK alias memanggil lagi script selanjutnya setelah fadeOut selama 1000millisecond itu dijalankan.. yg dijalankan itu effect fadeIn alias memunculkan dengan timing 1000millisecond juga “function() {kedip.fadeIn(1000,” .. nah pas muncul itu text, baru deh kasih fungsi CALLBACK ulangUlang yg mencakup effect fadeOut dan fadeIn tadi…😉

Okeh, semoga paham deh tulisan n penjelasan jelek gw… bingung juga cara nulis penjelasannya. Secara gw juga bukan penulis andal.. heuheuheuheu…

Contoh fungsi kedip2 ini >> http://jsfiddle.net/anshoridotnet/qdvCg/2/

Salam..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: