Membuat Efek Blink Dengan CSS & jQuery

Membuat Efek Blink Dengan CSS & jQuery - Dari sekian artikel yang ada di blog ini rupanya yang masih belum ada adalah mengenai BLINK. Blink adalah salah satu cara yang digunakan untuk menimbulkan EFEK BERKEDIP pada teks atau objek. Membuat efek blink ini sebenarnya sangat mudah dilakukan karena hanya cukup menambahkan parameter blink pada pada teks atau objek yang akan dibuat agar memiliki efek berkedip

Untuk membuat efek berkedip pada teks atau objek maka cara sederhananya adalah cukup menambahkan kode <blink> diantara teks atau objek tersebut
Contoh:
Saya ingin membuat tulisan "Panduan Template Blog" berkedip, maka penambahan kode blink adalah <blink>"Panduan Template Blog"</blink> dan hasilnya seperti dibawah ini:
"Panduan Template Blog"

Itulah cara dasar untuk membuat efek blink pada teks, pada objek atau gambar caranya juga sama, cukup dengan menambahkan kode <blink>. Dan sayangnya untuk penerapan kode Blink secara langsung sudah tidak dapat berfungsi dengan baik, seperti yang terlihat pada contoh diatas yang tidak berkedip. Namun untuk membuat efek berkedip bekerja dan jadi lebih menarik maka cara terbaik adalah menggunakan kode CSS dan jQuery atau javascript

Perhatikan DEMO EFEK BLINK berikut ini:
Wow, Kedip Kedip... Keren...



Untuk membuat efek berkedip seperti diatas, caranya juga cukup mudah, silahkan salin kode CSS berikut ini kedalam kode template blog sobat:
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

Dan pasang juga kode jQuery berikut ini sebelum kode "</body>
function blinker() {
$('.blink_me').fadeOut(500);
$('.blink_me').fadeIn(500);
}
setInterval(blinker, 1000);

Gunakan kode HTML seperti dibawah ini:
<span class="blink_me">Ganti Tulisan Ini Sesuka Hatimu..</span>

Untuk membuat efek berkedip pada gambar, caranya juga sama, hanya mengganti Tulisan dengan link(url) gambar yang ingin dibuatkan memiliki efek blink. Silahkan dicoba, semoga bermanfaat

Sumber