Selamat datang di website BitiBingit pada kesempatan kali ini kami ingin memnyajikan artikel yang berjudul cara membuat tulisan bergerak di html.
Anda seringkali melihat sebuah teks berjalan atau running text di sejumlah media misalnya website, atau TV (biasanya muncul di bagian bawah layar) dan lain-lain.
Pastinya, teks berjalan itu membuat orang tertarik untuk membacanya dan kepo gimana sih cara membuat yang seperti itu(teks berjalan).
Biasanya, teks berjalan itu terdapat di sebuah website yang dipakai untuk media notifikasi, info pendek, lalu hiburan (hiasan) saja. Untuk membuat sebuah teks berjalan pun dibilang cukup mudah karena kita hanya memerlukan 1 tag yang terdapat di HTML.
1. Tutorial Cara Membuat Teks Berjalan Sederhana
Untuk Membuat teks berjalan di HTML, kita dapat menggunakan tag marquee. Tag marquee berfungsi untuk membuat teks berjalan di html, Anda dapat mencoba tag marquee seperti ini
<marquee>Contoh teks berjalan</marquee>
dan code keseluruhannya seperti dibawah ini
<html> <head> <title>Belajar HTML by CakMan.ID</title> </head> <body> <marquee>Contoh teks berjalan</marquee> </body> </html>
Dan hasilnya akan seperti berikut :
2. Menggunakan Atribut bawaaan marquee yaitu width dan height
Atribut width dipakai ketika kita ingin mengatur ukuran lebar dari tag elemen marquee dengan memakai nilai angka yang bisa dipahami oleh sistem misalnya 18, 15% atau 30px. Lalu, atribut height dipakai untuk mengatur ukuran tinggi dari tag elemen marquee dengan memakai nilai angka yang sama seperti atribut width tadi, yakni 18, 15% atau 30px.
Anda dapat mencoba tag elemen marqueenya menjadi seperti ini
<marquee width="500" height="40">Teks ini berjalan</marquee>
dan keseluruhan codenya ada dibawah ini :
<html> <head> <title>Belajar HTML by CakMan.ID</title> </head> <body> <marquee width="500" height="40">Teks ini berjalan</marquee> </body> </html>
Dan hasilnya akan seperti dibawah ini :
3. Memakai Atribut Direction
Atribut direction dipakai ketika kita ingin mengatur arah gerak dari isi yang ada pada elemen tag marquee. Nilai yang dipakai untuk atribut direction ini ada 4 yaitu up(atas), down(bawah), dan right(kanan), serta left(kiri). Pengaturan default dari tag elemen marquee ini langsung dari direction right, maksud dari direction ini adalah pergerakan animasinya yang ada pada marquee dimulai dari isi nilai yang diberikan jika nilainya right maka teksnya akan bergerak dari kanan lalu nilai left maka teks bergerak dari kiri dan nilai up maka teks akan bergerak dari atas dan yang terakhir down maka teks akan bergerak dari bawah
Anda dapat mencoba tag elemen marqueenya menjadi seperti ini :
<marquee direction="right">Teks menuju kanan</marquee> <marquee direction="left">Teks menuju kiri</marquee>
Dan keseluruhan codenya ada dibawah ini :
<html> <head> <title>Belajar HTML by CakMan.ID</title> </head> <body> <marquee direction="right">Teks menuju kanan</marquee> <marquee direction="left">Teks menuju kiri</marquee> </body> </html>
hasilnya akan seperti ini :
Ini tag elemen marquee yang menggunakan direction up dan down :
<marquee direction="up" height="50">Teks bergerak dari bawah ke atas</marquee><br> <marquee direction="down" height="50">Teks dari atas ke bawah</marquee>
Dan keseluruhan codenya ada dibawah ini :
<html> <head> <title>Belajar HTML by CakMan.ID</title> </head> <body> <marquee direction="up" height="50">Teks ini bergerak dari bawah ke atas</marquee><br> <marquee direction="down" height="50">Teks ini bergerak dari atas ke bawah</marquee> </body> </html>
Dan hasilnya akan seperti dibawah ini :
4. Memakai atribut behavior
Atribut behavior digunakan untuk mengatur jenis pergerakan marquee. Nilai yang bisa diisi pada atribut behavior ini yakni slide, dan scroll serta alternate. Kalau Anda tak memberikan atribut behavior pada tag elemen <marquee> Anda maka pengaturan secara default nilainya yaitu memakai scroll.
Nilai scroll yaitu isi dari tag elemen marquee tersebut akan bergerak ke sisi yang satu dan muncul lagi dari sisi yang berlawanan. Setelah itu, nilai slide yaitu isi marquee tersebut bergerak menuju ke satu sisi dan saat akan sampai di sisi itu, teks marquee itu akan diam (berhenti bergerak). Dan yang terakhir, nilai alternate yaitu isi tag elemen tersebut akan bergerak memantul dari satu sisi lalu kembali lagi ke sisi yang berlawan.
Berikut ini tag elemen yang menggunakan atribut behavior :
<marquee behavior="scroll" width="400">Contoh aja bro</marquee><br> <marquee behavior="slide" width="400">Contoh aja bro</marquee><br> <marquee behavior="alternate" width="400">Contoh aja bro</marquee><br>
Dan berikut adalah keseluruhan codenya :
<html> <head> <title>Belajar HTML by CakMan.ID</title> </head> <body> <marquee behavior="scroll" width="400">Contoh aja bro</marquee><br> <marquee behavior="slide" width="400">Contoh aja bro</marquee><br> <marquee behavior="alternate" width="400">Contoh aja bro</marquee><br> </body> </html>
Dan hasilnya akan seperti ini :
5. Memakai Atribut scrollday
Atribut scrolldelay adalah atribut yang dipakai untuk mengatur waktu delay (tunda) per langkah di dalam satuan milisekon ( catatan : 1 milisekon = 1 per 1000 detik) yang diberi dengan nilai angka misalnya 100. Lalu untuk nilai default –nya dari atribut ini adalah 85.
Berikut ini tag elemen yang menggunakan atribut scrollday :
<marquee width="600">Belajaran aja</marquee><br> <marquee scrolldelay="100" width="600">Belajaran aja</marquee><br> <marquee scrolldelay="400" width="600">Belajaran aja</marquee>
Full source codenya dibawah ini :
<html> <head> <title>Atribut Scrolldelay di Tag Marquee</title> </head> <body> <marquee width="600">Belajaran aja</marquee><br> <marquee scrolldelay="100" width="600">Belajaran aja</marquee><br> <marquee scrolldelay="400" width="600">Belajaran aja</marquee> </body> </html>
Dan hasilnya seperti dibawah ini :
6. Memakai Atribut scrollamount
Atribut scrollamount adalah atribut yang dipakai untuk mengatur kecepatan isi dari tag element <marquee> dalam bergerak dengan satuan pixel. Lalu untuk nilai default-nya sendiri yaitu 6.
Berikut ini tag elemen yang menggunakan atribut scrollamount :
<marquee width="600">Belajaran aja</marquee><br> <marquee scrollamount="15" width="600">Belajaran aja</marquee><br> <marquee scrollamount="25" width="600">Belajaran aja</marquee>
Hasil full source codenya ada dibawah ini :
<html> <head> <title>Atribut Scrollamount di Tag Marquee</title> </head> <body> <marquee width="600">Belajaran aja</marquee><br> <marquee scrollamount="15" width="600">Belajaran aja</marquee><br> <marquee scrollamount="25" width="600">Belajaran aja</marquee> </body> </html>
hasilnya akan jadi seperti ini :
7. Memakai Atribut bgcolor :
Atribut bgcolor adalah atribut yang dipakai untuk mengatur warna background atau latar belakang di tag elemen marquee. Nilai atribut bgcolor dapat diisi dengan nama warna contohnya blue, red,grey atau dalam kode heximal seperti #469A9A.
Berikut ini tag elemen yang menggunakan atribut bgcolor :
<marquee bgcolor="cyan" width="400">Nyoba warna</marquee>
Hasil Full source codenya ada dibawah ini :
<html> <head> <title>Atribut BGColor di Tag Marquee</title> </head> <body> <marquee bgcolor="cyan" width="400">belajar warna marquee</marquee> </body> </html>
hasilnya akan seperti dibawah ini :
8. Memakai atribut HSpace
Atribut HSpace adalah atribut yang dipakai untuk mengatur ruang kosong (space) yang horizontal di kiri dan kanan tag elemen marquee. Umumnya diberi dengan nilai biasa seperti 20, 15% ataupun 40px.
Berikut ini tag elemen yang menggunakan atribut bgcolor :
<marquee bgcolor="cyan" width="400">Belajar hspace 1</marquee><br> <marquee hspace="15" bgcolor="blue" width="400">Belajar hspace 2</marquee><br> <marquee hspace="40" bgcolor="green" width="400">Belajar hspace 1</marquee>
Untuk full sourcenya ada dibawah ini :
<html> <head> <title>Atribut HSpace di Tag Marquee</title> </head> <body> <marquee bgcolor="cyan" width="400">Belajar hspace 1</marquee><br> <marquee hspace="15" bgcolor="blue" width="400">Belajar hspace 2</marquee><br> <marquee hspace="40" bgcolor="green" width="400">Belajar hspace 1</marquee> </body> </html>
Hasilnya akan seperti ini :
9. Memakai atribut vspace
Atribut VSpace adalah atribut yang dipakai untuk mengatur ruang kosong (space) yg vertikal di atas dan bawah tag elemen marquee. Umumnya diberi dengan nilai yang berisi angka contohnya 20, 15% atau 40px.
Berikut ini tag elemen yang menggunakan atribut vspace :
<marquee bgcolor="cyan" width="400">Belajar vspace</marquee><br> <marquee vspace="15" bgcolor="blue" width="400">Belajar vspace</marquee><br> <marquee vspace="20" bgcolor="yellow" width="400">Belajar vspace</marquee>
Untuk full source ada dibawah ini :
<html> <head> <title>Atribut VSpace di Tag Marquee</title> </head> <body> <marquee bgcolor="cyan" width="400">Belajar vspace</marquee><br> <marquee vspace="15" bgcolor="blue" width="400">Belajar vspace</marquee><br> <marquee vspace="20" bgcolor="yellow" width="400">Belajar vspace</marquee> </body> </html>
Dan hasilnya seperti dibawah ini :
10. Memakai atribut loop
Atribut loop adalah atribut yang dipakai untuk menentukan berapa kali isi dari tag elemen marquee tersebut berulang dan untuk nilai defaultnya yaitu tak terbatas.
Berikut ini tag elemen yang menggunakan atribut loop :
<marquee loop="2" width="400">belajar cakman.id</marquee><br> <marquee loop="2" behavior="slide" width="400">belajar cakman.id</marquee>
Isi full source codenya :
<html> <head> <title>Atribut Loop di Tag Marquee</title> </head> <body> <marquee loop="2" width="400">belajar cakman.id</marquee><br> <marquee loop="2" behavior="slide" width="400">belajar cakman.id</marquee> </body> </html>
Dan hasilnya akan seperti dibawah ini :
11. Menggunakan isi marquee dengan gambar
Tak hanya berupa teks saja, tag elemen marquee ini dapat diisikan dengan gambar.
Berikut ini adalah codenya :
<marquee width="500"> <img src="silvana.jpg" height="100" /> <img src="roger.jpg" height="100" /><img src="layla.jpg" height="100" /></marquee>
Dan full source codenya dibawah ini :
<html> <head> <title>Gambar di Tag Marquee</title> </head> <body> <marquee width="500"> <img src="silvana.jpg" height="100" /> <img src="roger.jpg" height="100" /><img src="layla.jpg" height="100" /></marquee> </body> </html>
Untuk lebih lengkapnya bisa lihat video di channel kami dibawah ini :
Kode HTML Tulisan Berjalan Dan Berwarna
HTML adalah bahasa markup yang kuat yang memungkinkan kita membuat hal-hal keren di web. Salah satu efek yang bisa kita coba adalah membuat teks berjalan dan berubah warna secara otomatis. Ini bisa menjadi tambahan menarik untuk situs web atau blog kita, membuat tampilan halaman web semakin hidup. Yuk, kita lihat bagaimana cara melakukannya!
Langkah 1: Struktur Dasar HTML
Seperti biasa, kita akan memulai dengan struktur dasar HTML. Buatlah sebuah file HTML baru dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teks Berjalan dan Berwarna</title>
<!-- Gaya CSS akan kita tambahkan di sini -->
</head>
<body>
<!-- Teks berjalan akan kita tambahkan di sini -->
</body>
</html>
Langkah 2: Menambahkan Gaya CSS
Selanjutnya, kita perlu menambahkan gaya CSS untuk mengatur teks berjalan dan berwarna. Kode CSS berikut akan membuat teks berjalan dari kanan ke kiri dan berubah warna dari merah ke biru:
<style>
/* Gaya untuk teks berjalan */
.scrolling-text {
white-space: nowrap;
overflow: hidden;
animation: scrollText 10s linear infinite; /* Ubah durasi sesuai keinginan */
}
/* Gaya animasi teks berjalan */
@keyframes scrollText {
0% {
transform: translateX(100%);
color: red; /* Ubah warna sesuai keinginan */
}
100% {
transform: translateX(-100%);
color: blue; /* Ubah warna sesuai keinginan */
}
}
</style>
Langkah 3: Menambahkan Teks Berjalan
Sekarang, kita akan menambahkan teks yang akan berjalan. Teks ini akan memiliki kelas "scrolling-text" yang mengacu pada gaya CSS yang telah kita buat sebelumnya:
<div class="scrolling-text">
Ini adalah contoh teks berjalan dan berubah warna secara otomatis. Selamat mencoba!
</div>
Langkah 4: Simpan dan Lihat Hasilnya
Simpan file HTML Anda dan buka di browser. Anda akan melihat teks berjalan dari kanan ke kiri sambil berubah warna dari merah ke biru secara otomatis.
Itu dia, cara membuat teks berjalan dan berubah warna secara otomatis menggunakan HTML dan CSS. Anda dapat mengkustomisasi durasi, warna, dan gaya animasi sesuai dengan preferensi Anda. Semoga artikel ini membantu Anda menambahkan elemen yang menarik ke situs web atau blog Anda!
Baiklah cukup sekian artikel tentang cara membuat tulisan bergerak di html, semoga artikel ini bermanfaat dan semoga bermanfaat.
