Cara Membuat Tulisan Bergerak Di HTML

Cara Membuat Tulisan Bergerak Di HTML

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 :

 

cara membuat tulisan bergerak di html notepad

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 :

cara membuat tulisan bergerak dan berwarna di html

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 :

cara membuat tulisan berjalan di title html

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 :

cara membuat teks bergerak pada html

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 :

cara membuat tulisan bergerak di web html

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 :

cara membuat tulisan berjalan di html

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 :

 

cara membuat tulisan berjalan di html dengan notepad

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 :

cara membuat tulisan berjalan dengan html

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 :

 

cara membuat tulisan bergerak pada html

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 :

membuat tulisan berjalan pada html

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 :


 

Baiklah cukup sekian artikel tentang cara membuat tulisan bergerak di html, semoga artikel ini bermanfaat dan semoga bermanfaat.

 

Subscribe to receive free email updates: