Cara Membuat Marquee Dengan CSS

Usuluddin, S.Kom    Senin, Februari 24, 2020    TUTORIAL   

Cara Membuat Marquee Dengan CSS

GoSEO.id - Marquee adalah elemen atau tag html yang berfungsi untuk membuat teks atau gambar berjalan secara vertikal ataupun horizontal pada halaman web.

Contoh:
GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.

Saat ini, tag marquee sudah jarang kita temui atau tidak tampak lagi walau pada kenyataannya tag ini masih berfungsi dengan baik. Kita tidak akan tau kedepannya mungkin tag ini benar-benar akan hilang dan tidak disupport lagi pada browser.

Namun, kita tetap akan bisa membuat teks atau gambar berjalan tanpa menggunakan tag marquee, yaitu menggunakan CSS Animation. Maka dari itu, pembahasan kita hari ini adalah "Cara Membuat Marquee Dengan CSS".

Mari simak tahapan berikut untuk membuat marquee dengan CSS :

Cara Membuat Marquee Dengan CSS

1. Bila kamu ingin membuat text marquee sederhana dengan CSS, silahkan gunakan kode berikut ini :
   Kode CSS :
   

   .marquee-text {
     height: 30px;
     display: block;
     line-height: 30px;
     overflow: hidden;
     position: relative;
   }
   
   .marquee-text:before,
   .marquee-text:after {
     content: '';
     position: absolute;
     width: 5px;
     height: 100%;
     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>GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
     </div>
   </div>

   Maka hasilnya :
   

   GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.

2. Dan jika kamu ingin membuat kalimat bersambung dengan jarak kalimat yang tidak terlalu jauh, bisa gunakan kode berikut :
   Kode CSS :
   

   .marquee-text {
     height: 30px;
     display: block;
     line-height: 30px;
     overflow: hidden;
     position: relative;
   }
   .marquee-text:before,
   .marquee-text:after {
     content: '';
     position: absolute;
     width: 5px;
     height: 100%;
     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 GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
     <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
     </div>
   </div>
   
   <div class="marquee-text on-768px">
     <div>
     <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
     <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
     </div>
   </div>
   
   <div class="marquee-text on-425px">
     <div>
     <span>Selamat Datang di GoSEO.id</span>
     <span>Selamat Datang di GoSEO.id</span>
     </div>
   </div>

   Maka hasilnya :
   

   Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
   Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.

   Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
   Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.

   Selamat Datang di GoSEO.id
   Selamat Datang di GoSEO.id

Begitulah pembahasan kita hari ini tentang "Cara Membuat Marquee Dengan CSS". Selamat Berkreasi dan semoga postingan ini bermanfaat. Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar dibawah ini.