Cara Membuat Teks Berkedip di HTML

Teks berkedip tidak pernah menjadi bagian fungsi standar HTML, dan tidak ada metode yang seragam untuk setiap peramban. Apabila Anda hanya ingin menggunakan HTML, opsi terdekatnya adalah memakai label (tag) marquee (tenda) meskipun opsi ini pun tidak berfungsi di Google Chrome. Metode JavaScript lebih dapat diandalkan, dan Anda bisa menyalin tempel kode secara langsung ke dokumen HTML.

Metode 1

Metode 1 dari 2:

Menggunakan Label Marquee

Unduh PDF

1
Gunakan cara ini hanya untuk proyek pribadi. Metode label marquee ini sudah kuno, dan banyak pengembang yang sangat menyarankan untuk menjauhinya. Beragam peramban akan menampilkannya secara berbeda, dan pembaruan yang akan datang dapat mencegah teks bisa berkedip sama sekali. ^{[1]XTeliti sumber}^{[2]XTeliti sumber} Pelajari pendekatan Javascript kalau Anda ingin membuat situs web profesional.
- Google Chrome tidak mendukung atribut "scrollamount", yang sangat diandalkan metode ini. ^{[3]XTeliti sumber} Di peramban tersebut, teks akan bergulir di halaman alih-alih berkedip.
2
Masukkan label marquee di sekeliling teks berkedip. Buka dokumen HTML dalam editor teks sederhana. Tikkan <marquee> di depan teks yang ingin dikedipkan. Lalu, tikkan </marquee> di akhirnya.
- Seperti biasa, persiapkan halaman HTML Anda terlebih dahulu dengan label <html>, <head>, dan <body>.
3
Persiapkan lebar (width) teks. Ubah label pembuka ke <marquee width="300">. Langkah ini tidak akan mengubah ukuran fon. Ada dua alasan Anda perlu mengubah lebar teks ke angka lain:
- Kalau tidak muat, teks akan bergulir alih-alih berkedip. Untuk mencegahnya, kita menaikkan lebar teks.
- Pada Chrome, teks akan bergulir pada jarak yang ditentukan lebar.
4
Atur scrollamount ke angka yang sama dengan lebar. Di dalam label yang sama, tuliskan scrollamount="300" (atau angka yang sama dengan lebar). Pada setelan awal, teks marquee bergulir menyeberangi halaman. Dengan mengatur jumlah guliran ke angka yang sama dengan lebar, teks akan "bergulir" ke posisi yang sama. Hal ini menimbulka efek kedip.
- Tampilan teks Anda sekarang seperti ini:
  <marquee width="300" scrollamount="300">Teks berkedip di sini.</marquee>.
5
Ubah penundaan (delay) guliran. Buka berkas HTML dalam peramban web untuk melihat efeknya. Jika teks berkedip terlalu cepat atau lambat, ubah kecepatannya dengan atribut scrolldelay="500". Angka awal delay adalah 85.^{[4]XTeliti sumber} Perbesar angka ini supaya teks berkedip lebih lambat, atau turunkan supaya berkedip yang cepat.
- Teks Anda sekarang tampak seperti ini:
  <marquee width="300" scrollamount="300" scrolldelay="500">Teks berkedip di sini.</marquee>
6
Batasi jumlah kedip (opsional). Banyak pengguna web yang terganggu oleh teks berkedip. Untuk menghentikan animasinya setelah mendapatkan perhatian pembaca, masukkan loop="7". Sekarang teks akan berkedip tujuh kali, kemudian menghilang (Anda bisa menggunakan sembarang angka menggantikan tujuh).
- Kode lengkapnya adalah sebagai berikut:
  <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Teks berkedip di sini.</marquee>
Iklan

Metode 2

Metode 2 dari 2:

Menggunakan JavaScript

Unduh PDF

1
Masukkan skrip kedip ke judul dokumen HTML. Di antara label <head> dan </head> di dokumen HTML, masukkan kode JavaScript berikut:^{[5]XTeliti sumber}
- function blinktext() {
    var f = document.getElementById('announcement');
    setInterval(function() {
      f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
    }, 1000);
  }
Kode di atas menentukan fungsi dan menamainya dengan "blinktext" (teks kedip) Untuk menggunakan fungsi ini di HTML, ubah label <body> ke <body >.
3
Tetapkan teks berkedip sebagai announcement (pengumuman). Skrip ini hanya memengaruhi elemen dengan id "announcement". Letakkan teks berkedip di dalam semua elemen yang memberikan Anda id tersebut. Sebagai contoh, tikkan <p id="announcement">Teks berkedip di sini.</p> atau <div id="announcement">Teks berkedip di sini.</div>.
- Anda bisa memberikan nama yang disukai. Pastikan saja Anda memakai kata yang sama dalam skrip dan elemen id.
4
Sesuaikan skrip. Angka "1000" dalam skrip menetapkan penundaan antara kedip. Angka tersebut dalam satuan mikrodetik sehingga angka 1000 membuat teks berkedip sekali per detik. ^{[6]XTeliti sumber} Turunkan angka ini untuk mempercepat kedip, atau naikkan untuk memperlambatnya.
- Penundaan yang sebenarnya tidak akan sepenuhnya cocok dengan angka yang dimasukkan. Biasanya kedip akan lebih singkat, tetapi bisa lebih lambat jika peramban sedang sibuk bekerja.
Iklan

Tips

Anda bisa menyesuaikan tampilan teks marquee dengan atribut gaya. Coba tambahkan atribut berikut: style="border:solid".
Anda bisa menyertakan atribut tinggi dan lebar di dalam label marquee, tetapi kebanyakan peramban akan mengabaikannya.^{[7]XTeliti sumber} Anda dapat menyadari perbedaannya jika menambahkan garis batas pada marquee.
Anda juga bisa memakai CSS Animations untuk membuat teks berkedip. Langkah ini lumayan rumit dan tidak disarankan bagi awam. Catat bahwa Anda membutuhkan dokumen CSS tertaut karena Firefox tidak mendukung CSS Animations dengan “baris” CSS.^{[8]XTeliti sumber}