Selasa, 02 Juni 2015

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 Anda:
.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

Membuat Efek Blink Dengan CSS & jQuery Rating: 4.5 Diposkan Oleh: ana sriwahyuni

11 komentar:

  1. keren banget mbak, efek blink nya, gambar jadi kedip2 . .saya ijin simpan dlu scriptnya mbak, trims mbak Ana :)

    BalasHapus
  2. keren juga nih efeknya.. boleh juga nih dicoba..

    BalasHapus
  3. efek blink nya bagus benget, bisa di terapkan di gambar juga :)

    BalasHapus
  4. menarik sekali efek blink², tapi ngomong² bisa gak di pakai pada judul blog :)

    BalasHapus
  5. wow ... ting ting.. keren juga!!, simple kodennya, cocock buat yang suka tampilan design yang semarak ini yah! :))

    BalasHapus
  6. jadi kelap kelip ya, blik2 nya, kaya nya keren kalo di bikin buat kaya iklan2 gitu

    BalasHapus
  7. boleh juga bu.. izin pasang lah..

    BalasHapus
  8. Bagus nih boleh di coba di blog2 ane. Makasih mba!

    BalasHapus
  9. Nanti saya coba mba, itu Efek Blink nya bisa disisipin Link URL juga ya Mba ? ... masalahnya saya sudah lama gak pake kode script blink karena dulu pas di cek tidak valid html5, jadi saya hapus huruf dan link yg memakai efek blink ...

    BalasHapus
  10. kalo pake perintah html biasa yg spt dulu skrg udah gak bling2 lg...termasuk contoh tulisan 'hapus tulisan ini sesuka hatimu'. tp klo pake css n j query bisa work dg baik. Makasih ilmunya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia