HTML Blink dan Marquee

Ketika awal-awal belajar HTML, rasanya ingin membuat sesuatu yang wah dan keren.

Salah satunya membuat efek berkedip dan berjalan.

Contoh berkedip seperti ini:

kedap kedip

Contoh teks berjalan:

teksnya jalan oooy

Untuk membuat kedua efek itu sangat mudah (dulunya), karena untuk membuat efek kedip kita hanya perlu elemen tag <blink>...</blink>, dan untuk membuat efek berjalan cukup dengan <marquee>...</marquee>.

Membuat Efek Berkedip Blink

Saat ini, tag <blink> sudah tidak digunakan lagi. Jadi, ketika kamu menggunakan <blink>kedap kedip</blink> maka efeknya tidak akan muncul.

Jadi, untuk membuat efek kedip kita membutuhkan bantuan kode CSS sebagai berikut:

<style>
blink {
  -webkit-animation: 2s linear infinite kedip; /* for Safari 4.0 - 8.0 */
  animation: 2s linear infinite kedip;
}

/* for Safari 4.0 - 8.0 */
@-webkit-keyframes kedip { 
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

@keyframes kedip {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}</style>
<blink>kedap kedip</blink>

Setelah menambahkan kode diatas, baru kita bisa menggunakan tag <blink>.

Membuat Efek Berjalan

Kalau untuk efek berjalan masih bisa digunakan, yaitu dengan tag <marquee>.

Contohnya: <marquee>ini jalan looo</marquee>, akan menghasilkan:

ini jalan looo

Menggabungkan Efek Blink dan Marquee

Kita bisa menggabungkan kedua elemen tersebut menjadi satu, sehingga efeknya menjadi:

udah kedap kedip jalan lagi

Kode yang saya pakai adalah:

<style>
blink {
  -webkit-animation: 2s linear infinite kedip; /* for Safari 4.0 - 8.0 */
  animation: 2s linear infinite kedip;
}

/* for Safari 4.0 - 8.0 */
@-webkit-keyframes kedip { 
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

@keyframes kedip {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}</style>
<marquee><blink>udah kedap kedip jalan lagi</blink></marquee>

Kesimpulan

Untuk membuat efek <blink> keluar, kita membutuhkan tambahan kode CSS.

Karena, kode blink sudah tidak disupport di HTML dan web browser versi terbaru.

Sedangkan efek berjalan marquee masih bisa digunakan.

Inspirasi:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink