Cara membuat teks berjalan pada HTML
Tag yang digunakan untuk membuat teks berjalan/bergerak adalah <marquee> yang ditutup dengan tag </marquee>. Tag ini memiliki beberapa atribut yaitu behavior, scrolldelay, scrollamount, direction dan lain-lain.
Dibawah ini merupakan script HTML teks bergerak menggunakan tag marquee tanpa atribut.
<html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee> Ini tulisan berjalan tanpa atribut </marquee>
</body>
</html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee> Ini tulisan berjalan tanpa atribut </marquee>
</body>
</html>
Maka hasilnya akan seperti ini.
Dibawah ini adalah script marquee menggunakan atribut behavior. Atribut behavior memiliki 3 jenis yaitu scroll, slide, alternate.
Scroll yaitu agar teks berjalan terus ke satu sisi (sama seperti marquee tanpa atribut) .
Slide yaitu menjadikan gerakan teks tersendat-sendat
Alternate menjadikan gerakan teks bolak-balik memantul.
Dibawah ini adalah contoh scriptnya.
<html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee behavior="scroll"> Ini tulisan berjalan atribut behavior scroll </marquee>
<marquee behavior="slide"> Ini tulisan berjalan atribut behavior slide </marquee>
<marquee behavior="alternate"> Ini tulisan berjalan atribut behavior alternate </marquee>
</body>
</html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee behavior="scroll"> Ini tulisan berjalan atribut behavior scroll </marquee>
<marquee behavior="slide"> Ini tulisan berjalan atribut behavior slide </marquee>
<marquee behavior="alternate"> Ini tulisan berjalan atribut behavior alternate </marquee>
</body>
</html>
Maka hasilnya akan seperti ini.
Selanjutnya atribut scrolldelay, scrolldelay berfungsi mengatur delay gerakan teks, semakin besar angka dimasukan maka semakin lambat gerakannya. Dibawah ini merupakan contoh script marquee dengan atribut scrolldelay.
<html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee scrolldelay="50"> Ini tulisan berjalan atribut scrolldelay 50 </marquee>
<marquee scrolldelay="500"> Ini tulisan berjalan atribut scrolldelay 500 </marquee>
</body>
</html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee scrolldelay="50"> Ini tulisan berjalan atribut scrolldelay 50 </marquee>
<marquee scrolldelay="500"> Ini tulisan berjalan atribut scrolldelay 500 </marquee>
</body>
</html>
Maka hasilnya akan seperti ini.
Selanjutnya atribut scrollamount, scrollamount juga berfungsi mengatur kecepatan gerak teks, tetapi semakin besar angka yg dipakai, maka semakin cepat teks bergerak. Dibawah ini merupakan contoh script marquee atribut scrollamount .
<html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee scrolldelay="90"> Ini tulisan berjalan atribut scrollamount 90 </marquee>
<marquee scrolldelay="50"> Ini tulisan berjalan atribut scrollamount 50 </marquee>
</body>
</html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee scrolldelay="90"> Ini tulisan berjalan atribut scrollamount 90 </marquee>
<marquee scrolldelay="50"> Ini tulisan berjalan atribut scrollamount 50 </marquee>
</body>
</html>
Maka hasilnya akan seperti ini.
Selanjutnya ada atribut direction, direction berfungsi untuk mengatur arah gerak teks. Atribut direction ada 4 jenis yaitu up, down, left, right. Dibawah ini merupakan contoh scriptnya.
<html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee direction="up"> Ini tulisan berjalan atribut direction up </marquee>
<marquee direction="right"> Ini tulisan berjalan atribut direction right </marquee>
<marquee direction="down"> Ini tulisan berjalan atribut direction down </marquee>
<marquee direction="left"> Ini tulisan berjalan atribut direction left </marquee>
u; </body>
</html>
<head>
<title> SiiCoder.xyz </title>
</head>
<body>
<marquee direction="up"> Ini tulisan berjalan atribut direction up </marquee>
<marquee direction="right"> Ini tulisan berjalan atribut direction right </marquee>
<marquee direction="down"> Ini tulisan berjalan atribut direction down </marquee>
<marquee direction="left"> Ini tulisan berjalan atribut direction left </marquee>
u; </body>
</html>
Maka hasilnya akan seperti ini.
Sekian tentang bagaimana cara membuat teks bergerak/berjalan pada HTML. Follow SiiCoder & Share It :)
Komentar (0)
Post a Comment