How to create an eye catching marquee with divi theme

Build an eye-catching marquee banner for your Divi/WordPress website using basic HTML and CSS. This stylish scrolling effect pauses when hovered over and resumes sliding once you move your cursor away. It’s a fantastic way to announce new products or direct users to important content you want them to notice, all while adding a dynamic touch to your site!

HTML STRUCTURE:

<div class="marquee">
<div class="track">
    <!-- Original Content -->
    <span>→ Our New Arrivals → Best Sellers → Visit Our Shop → Contact Us → Subscribe to Our Newsletter→ Our New Arrivals → Best Sellers → Visit Our Shop → Contact Us → Subscribe to Our Newsletter</span>
   </div>
</div>

CSS CODE:

.marquee {
  position: relative;
  width: 100%; /* Full width of the container */
  height: 50px; /* Adjust height based on your text size */
  overflow: hidden; /* Hide any overflowing content */
  display: flex;
  align-items: center; /* Vertically align the text */
}

.track {
  display: flex; /* Arrange items horizontally */
  white-space: nowrap; /* Prevent wrapping of content */
  animation: marquee 20s linear infinite; /* Smooth scrolling animation */
}

.track > span {
  flex-shrink: 0; /* Prevent shrinking of text */
}


@keyframes marquee {
  from {
    transform: translateX(0); /* Start at the initial position */
  }
  to {
    transform: translateX(-50%); /* Move left by half the width of the track */
  }
}

/* Pause on hover */
.marquee:hover .track {
  animation-play-state: paused; /* Pause scrolling on hover */
}