Skip to main content

Membuat Elemen Marquee Dengan CSS

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 ataupu 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.


Berbagi itu peduli:

You Might Also Like:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Buka Komentar
PrivacySitemap
©2020 KOMPI AJAIB