Tentang HTML marquee Tag

Halo sobat yellowweb, kita berjumpa lagi di artikel terbaru. Untuk artikel kali ini kita akan mencoba berkenalan dengan tag HTML yang mungkin sangat di kenal karena, memiliki fitur yang cukup membuat orang kali pertama mengenal HTML, mungkin bisa berkata wow KEREN. ya Tag HTML Marquee.

Tag Marquee memungkinkan elemen tersebut membuat tulisan berjalan, seperti layaknya kita melihat news ticker berita yang ada di televisi. HTML dengan mudah menyediakan fitur tersebut dengan menggunakan tag Marquee.

<!DOCTYPE html>
<html>
<head>
	<title>Marquee HTML</title>
</head>
<body>
	<marquee>Tulisan ini menggunakan Tag HTML Marquee,...</marquee>

	<br>

	<marquee direction="up">Tulisan ini menggunakan Tag HTML Marquee,...</marquee>

	<br>

	<marquee direction="right">Tulisan ini menggunakan Tag HTML Marquee,...</marquee>

	<br>

	<marquee behavior="alternate">Tulisan ini menggunakan Tag HTML Marquee,...</marquee>

	<br>

	<marquee scrollamount="20">Tulisan ini menggunakan Tag HTML Marquee,...</marquee>

	<br>

	<marquee scrolldelay="100">Tulisan ini menggunakan Tag HTML Marquee,...</marquee>


</body>
</html>

Kalian bisa menggunakan sesuai dengan kebutuhan.

Untuk fitur ini di dukung oleh semua browser, namun ada beberapa attibut yang tidak berjalan. Untuk amannya kalian bisa menggunakan browser Mozilla atau Edge.

Sebagai tambahan mungkin bagi teman-teman, kurang menyukai dengan efek slidenya karena terkesan kurang smooth, cara ini kita bisa mensiasatinya dengan menggunakan CSS Marquee dan tentunya berbeda ya teman-teman. Dengan menggunakan CSS Marquee efek yang di timbulkan akan terasa lebih enak untuk di lihat, karena akan terlihat lebih smooth saat tulisan berjalan.

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style style="text/css">
.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: limegreen;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<!-- HTML -->	
<div class="example1">
<h3>Tulisan berjalan,... </h3>
</div>