Ditulis oleh: Ditulis pada: 2/22/2020
Membuat Elemen Marquee Dengan CSS - Marquee adalah sebuah tag HTML yang berguna untuk membuat teks atau gambar yang bergulis baik text atau gambar yang melintas secara horizontal ataupun secara vertikal pada sebuah halaman web.
Namun sayangnya tag <marquee> ini sekarang sudah tidak digunakan lagi meskipun kenyataannya tag ini masih berfungsi. Itu artinya, jika sekarang masih menggunakan tag <marquee> maka halaman web tersebut tidak valid HTML5, dan ke depannya akan benar-benar tidak disupport oleh browser.
Namun kita tetap bisa membuat sebuah elemen bergulir tanpa menggunakan <marquee> tag, yaitu dengan menggunakan CSS animation, sehingga bisa juga digunakan pada halaman AMP HTML.
Membuat elemen marquee yang sederhana dengan CSS bisa menggunakan kode seperti berikut:
Kode CSS:
.marquee-text {
height: 30px;
display: block;
line-height: 30px;
overflow: hidden;
position: relative;
background: #ddd;
}
.marquee-text:before,
.marquee-text:after {
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #ddd;
top: 0;
z-index: 2;
}
.marquee-text:before {
left: 0;
}
.marquee-text:after {
right: 0;
}
.marquee-text div {
height: 30px;
line-height: 30px;
font-size: 16px;
white-space: nowrap;
color: #555;
z-index: 1;
animation: marquee 15s linear infinite;
}
.marquee-text:hover div {
animation-play-state: paused
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}Kode HTML:
<div class="marquee-text">
<div>Selamat Datang di KompiAjaib.com - Blog yang membahas tentang tutorial, trik, dan widget Blogger juga SEO dan Internet Marketing.
</div>
</div>Dan jika ingin membuat kalimatnya bersambung atau jarak antar kalimatnya tidak terlalu jauh, bisa menggunakan kode berikut:
Kode CSS:
.marquee-text {
height: 30px;
display: block;
line-height: 30px;
overflow: hidden;
position: relative;
background: #ddd;
}
.marquee-text:before,
.marquee-text:after {
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #ddd;
top: 0;
z-index: 2;
}
.marquee-text:before {
left: 0;
}
.marquee-text:after {
right: 0;
}
.marquee-text div {
display: block;
width: 200%;
height: 30px;
line-height: 30px;
position: absolute;
overflow: hidden;
font-size: 16px;
color: #555;
z-index: 1;
animation: marquee 15s linear infinite;
}
.marquee-text span {
float: left;
width: 50%;
}
.marquee-text:hover div {
animation-play-state: paused
}
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
}
.on-768px,.on-425px {
display: none;
}
@media screen and (max-width: 1024px) {
.marquee-text div {
animation: marquee 10s linear infinite;
}
}
@media screen and (max-width: 768px) {
.marquee-text div {
animation: marquee 8s linear infinite;
}
.on-768px {
display: block;
}
.on-425px,.on-1440px {
display: none;
}
}
@media screen and (max-width: 425px) {
.marquee-text div {
animation: marquee 5s linear infinite;
}
.on-425px {
display: block;
}
.on-768px,.on-1440px {
display: none;
}
}Kode HTML:
<div class="marquee-text on-1440px">
<div>
<span>Selamat Datang di KompiAjaib.com - Blog yang membahas tentang tutorial, trik, dan widget Blogger juga SEO dan Internet Marketing.</span>
<span>Selamat Datang di KompiAjaib.com - Blog yang membahas tentang tutorial, trik, dan widget Blogger juga SEO dan Internet Marketing.</span>
</div>
</div>
<div class="marquee-text on-768px">
<div>
<span>Selamat Datang di KompiAjaib.com - Blog tutorial, trik, dan widget Blogger juga SEO dan Internet Marketing.</span>
<span>Selamat Datang di KompiAjaib.com - Blog utorial, trik, dan widget Blogger juga SEO dan Internet Marketing.</span>
</div>
</div>
<div class="marquee-text on-425px">
<div>
<span>Selamat Datang di KompiAjaib.com</span>
<span>Selamat Datang di KompiAjaib.com</span>
</div>
</div>Kode HTML nya dibuat per media query agar kalimatnya tidak terpotong sembarang. Silahkan cek responsive-nya di demo berikut.
Selamat berkreasi, semoga bermanfaat.