Source Code Marquee Effect Keren

Codepelajar – Marquee Effect merupakan salah satu fitur dalam bahasa pemrograman HTML dan CSS yang menghasilkan animasi bergulir dari suatu teks atau gambar. Efek ini membuat elemen-elemen tertentu menjadi bergerak secara horisontal atau vertikal dengan kecepatan tertentu, memberikan sentuhan dinamis pada halaman web. Dengan Marquee Effect, teks atau gambar dapat bergerak dari sisi ke sisi, menarik perhatian pengunjung seiring dengan gerakannya.

Penggunaan Marquee Effect tidak hanya terbatas pada teks yang bergerak secara horizontal atau gambar yang berjalan dari atas ke bawah. Efek ini dapat dikustomisasi sesuai dengan kebutuhan dan gaya desain yang diinginkan. Berbagai jenis gerakan dapat diterapkan, seperti gerakan melingkar, berputar, atau berkedip. Selain itu, kecepatan pergerakan dan jumlah pengulangan juga dapat diatur dengan mudah.

Salah satu keunggulan dari penggunaan Marquee Effect adalah meningkatkan interaksi dan keterlibatan pengunjung. Dalam dunia yang serba cepat saat ini, manusia cenderung memperhatikan hal-hal yang bergerak dan berbeda dari yang biasa. Dengan menggunakan Marquee Effect, pengunjung lebih tertarik untuk menjelajahi halaman web dan mengeksplorasi konten yang ada. Hal ini dapat meningkatkan tingkat retensi pengunjung, mengurangi tingkat bounce, dan meningkatkan potensi konversi.

Namun, penggunaan Marquee Effect harus dilakukan dengan bijak dan sederhana. Terlalu banyak elemen bergerak atau gerakan yang berlebihan dapat mengganggu pengalaman pengguna dan mengurangi fokus pada konten yang sebenarnya. Oleh karena itu, pemilihan elemen yang tepat dan efek yang disesuaikan dengan konteks situs web sangat penting.

Marquee Effect juga dapat digunakan secara fleksibel untuk berbagai keperluan, mulai dari tajuk berita yang berjalan di header halaman web, pengumuman penting yang perlu diberikan perhatian khusus, hingga galeri foto yang unik dengan gambar-gambar yang bergerak. Marquee Effect memberikan sentuhan interaktif yang membuat pengunjung tidak hanya membaca, tetapi juga terlibat secara visual.

Source Code Marquee Effect:

Kode ini dapat digunakan pada website seperti wordpress, blogspot dan website dengan konsep minimalis namun ingin menarik pengunjung website dengan efek ini.

HTML

  <div class="marquee">
    <ul class="marquee-content">
      <li><i class="fab fa-github"></i></li>
      <li><i class="fab fa-codepen"></i></li>
      <li><i class="fab fa-free-code-camp"></i></li>
      <li><i class="fab fa-dev"></i></li>
      <li><i class="fab fa-react"></i></li>
      <li><i class="fab fa-vuejs"></i></li>
      <li><i class="fab fa-angular"></i></li>
      <li><i class="fab fa-node"></i></li>
      <li><i class="fab fa-wordpress"></i></li>
      <li><i class="fab fa-aws"></i></li>
      <li><i class="fab fa-docker"></i></li>
      <li><i class="fab fa-android"></i></li>
    </ul>
  </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #111;
  color: #eee;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}

JavaScript

const root = document.documentElement;
const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
const marqueeContent = document.querySelector("ul.marquee-content");

root.style.setProperty("--marquee-elements", marqueeContent.children.length);

for(let i=0; i<marqueeElementsDisplayed; i++) {
  marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
}

Demo:

https://codepen.io/Coding_Journey/details/yWjWKd

Marquee Effect adalah sebuah fitur menarik dalam pembuatan situs web yang memberikan sentuhan interaktif dan visual yang dapat meningkatkan keterlibatan pengunjung. Dengan menggunakannya secara bijak dan sederhana, Marquee Effect dapat menjadi elemen yang memikat dan memberikan pengalaman yang tak terlupakan bagi pengguna. Sebagai pengembang web, tidak ada salahnya mencoba mengimplementasikan efek ini pada halaman web yang sedang dibuat untuk meningkatkan daya tarik dan keunikan situs tersebut.