Penulis 
Blink adalah salah satu efek dalam html yang dapat membuat objek (text, gambar, atau elemen lain) berkedip (muncul dan lenyap secara berkala) sehingga objek terlihat lebih interaktif alias lebih hidup. Seperti judulnya kali ini, saya akan membuat tutorial untuk membahas bagaimana cara membuat blink pada objek html (bukan blink Band luar negeri loh ya).
Secara teknis pembuatan objek yang berkelip atau berkedip tidaklah sulit, anda bisa menggunakan tag pembuka <blink> dan penutup </blink> untuk membuat tulisan nya berkedip. contohnya seperti ini :
<blink> Ini Tulisannya</blink>
Namun fungsi tag tersebut sekarang ini tidak berjalan untuk beberapa jenis browser, mungkin pengembang browser tidak memberi support tag seperti itu lagi. So to make it, kita menggunakan Plugin jquery saja. Oh ya, bisa juga dengan javascript tapi kali ini tidak akan saya bahas mungkin pada kesampatan lain akan saya bahas pembuatan objek kelap-kelip dengan javascript.
Pembuatan objek kelap-kelip (berkedip) dengan jquery kita hanya memakai fungsi effect fadeIn() dan fadeOut().
fadeIn() fungsi untuk memunculkan
fadeOut() fungsi untuk menghilangkan
Kedua fungsti diatas telah disediakan oleh jQuery (anda bisa baca di halaman resminya disini) namun bukan hanya kedua fungsi diatas saja yang akan kita gunakan, ada juga fungsi setInterval() yakni untuk menentukan jangka waktu secara berkala dalam skala milidetik. Maksudnya gimana min? nanti saya bahas di bagian-bagian kode sintaks. karena beberapa orang akan kesulitan mencerna teori tanpa melihat bayangannya seperti apa atau dalam hal ini adalah kode sintaks nya.
Oke cukup dengan ocehannya , kita lanjut ke pembuatan sintaks nya. simak baik-baik dan ikuti
- Buat file folder baru di htdocs, <bebas namanya>
- lalu copy script dibawah ini
<html>
<head>
<title>
Membuat Efek Tulisan atau Objek Kelap-Kelip (Blink) dengan jQuery
</title>
<script>
function kelapKelip() {
$('.coba').fadeOut(); #fungsi mehilangkan
$('.coba').fadeIn(); #fungsi munculkan
}
setInterval(kelapKelip, 1000); #set waktu berkala 1 detik, jadi setiap 1 detik sekali akan menjalankan function kelapKelip dimana dalam function tersebut terdapat fungsi fadeOut dan fadeIn
</script>
</head>
<body>
<div class="coba">Coba Teks Kelap-Kelip</div> <!-- Elemen yang akan kita beri efek berkedip-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script></body>
</html>
- Lalu save dengan nama index.php
- Buka url di browser untuk mengecek apakah dapat berjalan sukses atau tidak http://localhost/namafoldernya/index.php
Note :
- teks "Coba Teks Kelap-Kelip" bisa anda rubah dengan teks lain ataupun dengan elemen image, <div class="coba"><img src="link imagenya"/></div>
Demikian tutorial mengenai cara Membuat Efek Tulisan atau Objek Kelap-Kelip (Blink) dengan jQuery FadeIn FadeOut, jika kurang mengerti silahkan tinggalkan komentar. jika telah mengerti, silahkan bereksperimen lebih canggih lagi hehe. sekian dan terima kasih..
1 komentar so far
apakah bisa dibuat untuk memasukkan gambar juga kak?
Komentar yang mengandung spam / link aktif akan secara otomatis disembunyikan. Mohon maaf atas ketidaknyamanan jika pertanyaan telat ataupun tidak terbalas karena keterbatasannya waktu. Silahkan hubungi kami di menu Contact Us. Terimakasih
EmoticonEmoticon