How to Create Infinite Scrolling Text/Marquee In Elementor (No Plugin)

Creating an infinite scrolling text/marquee in Elementor free version involves more than just adding text or images. To achieve a smooth, modern scroll effect that works seamlessly across desktop, mobile, and tablet devices, we need to use custom CSS. This guide will walk you through creating a continuous scrolling marquee with responsive behavior and a unique hover effect, ensuring no breaks in the animation.

Let’s go step-by-step to build this marquee in Elementor without the need for external plugins.

Why Use a Marquee in Elementor?

Marquees are excellent for:

• Displaying announcements or promotional content.
• Rotating testimonials or client logos.
• Adding interactive, dynamic elements to your web design.

In this tutorial, we’ll explore how to create a scrolling marquee that:

• Works smoothly on desktop, mobile, and tablet devices.
• Includes images and text in the scroll.
• Has a custom hover animation for enhanced interaction.

Step 1: Design Structure for the Marquee

In Elementor, you’ll use a section and a container/inner section structure to place your text or images.

Here’s the design structure for the marquee:

• Section (Full Width, no padding): This section will hold the marquee content. It needs to span the entire width of the page.
  • CSS Class: marquee-section
• Container/Inner Section: Inside the section, add a container to hold the scrolling elements (text, images, etc.).
  • CSS Class: infinite-marquee
• Widgets: Inside the container, you can place the text, images, or any other Elementor widgets you want to scroll.

Once the structure is set up in Elementor, we can move on to applying the CSS.

Step 2: CSS for the Infinite Marquee

Below is the updated CSS code for your infinite marquee, including the hover effect and adjustments for responsiveness across devices.

Main CSS:

/* Main marquee section */
.marquee-section {
  display: flex;
  overflow: hidden;
  height: 10vh;
  user-select: none;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
/*transform: skewY(-3deg); */
/*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}

/* Inner marquee container */
.infinite-marquee {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: scroll 15s linear infinite;
}

.infinite-marquee span {
  color: white;
  font-size: 5vw;
  font-weight: 800;
  white-space: nowrap;
  font-family: 'Syne', sans-serif !important;
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Make transition global */
}

/* Hover effect with smooth scaling and color change */
.marquee-section:hover .infinite-marquee span {
  -webkit-transform: scale(1.1); /* Scaling with vendor prefixes */
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  
  color: #e74c3c !important; /* Change to red */
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Smooth transition */
}

/* Scrolling animation */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

/* Responsive font size adjustments */
@media only screen and (max-width: 1024px) {
  .infinite-marquee span {
    font-size: 6.5vw;  /* Larger for tablets */
  }
}

@media only screen and (max-width: 768px) {
  .infinite-marquee {
    animation-duration: 12s; /* Faster scroll speed on mobile */
  }

  .infinite-marquee span {
    font-size: 7.5vw;  /* Adjust font size for smaller mobile screens */
  }
}

@media only screen and (max-width: 480px) {
  .infinite-marquee {
    animation-duration: 10s;  /* Increase speed for very small screens */
  }

  .infinite-marquee span {
    font-size: 8.5vw;  /* Further adjust for smaller devices */
  }
}

Step 3: Explanation of Key CSS Features

1. Infinite Scrolling:

• The .infinite-marquee class handles the continuous scroll. The @keyframes scroll animation moves the text or images from right to left without stopping.
• For mobile devices, the speed is adjusted to ensure the content scrolls faster on smaller screens.

2. Responsive Design:

• The font size changes for tablets and mobile devices to ensure readability.
• On smaller screens, the marquee scrolls faster to avoid sluggish movement.

3. Hover Animation:

• When hovered, the text grows larger (scale(1.1)) and changes to a red color (#e74c3c).
• This animation adds an engaging effect without interrupting the continuous scrolling.

Step 4: Multiple Scroll Text Animations (Optional)

If you want to create multiple scroll text animations on different sections of your page, it’s easy to do so by assigning different CSS classes for each marquee.

Here’s how to handle multiple marquees:

1. Assign unique classes to each new section and container.
   • For example:
     • Section 2: marquee-section-2
     • Container 2: infinite-marquee-2
2. Update the CSS accordingly for each marquee instance:

/* Main marquee section 2*/
.marquee-section2 {
  display: flex;
  overflow: hidden;
  height: 10vh;
  user-select: none;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
/*transform: skewY(-3deg); */
/*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}

/* Inner marquee container */
.infinite-marquee2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: scroll 15s linear infinite;
}

.infinite-marquee2 span {
  color: white;
  font-size: 5vw;
  font-weight: 800;
  white-space: nowrap;
  font-family: 'Syne', sans-serif !important;
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Make transition global */
}

/* Hover effect with smooth scaling and color change */
.marquee-section2:hover .infinite-marquee2 span {
  -webkit-transform: scale(1.1); /* Scaling with vendor prefixes */
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  color: #e74c3c !important; /* Change to red */
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Smooth transition */
}

/* Scrolling animation */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

/* Responsive font size adjustments */
@media only screen and (max-width: 1024px) {
  .infinite-marquee2 span {
    font-size: 6.5vw;  /* Larger for tablets */
  }
}

@media only screen and (max-width: 768px) {
  .infinite-marquee2 {
    animation-duration: 12s; /* Faster scroll speed on mobile */
  }

  .infinite-marquee2 span {
    font-size: 7.5vw;  /* Adjust font size for smaller mobile screens */
  }
}

@media only screen and (max-width: 480px) {
  .infinite-marquee2 {
    animation-duration: 10s;  /* Increase speed for very small screens */
  }

  .infinite-marquee2 span {
    font-size: 8.5vw;  /* Further adjust for smaller devices */
  }
}

Step 5: Reverse the Scrolling Direction (Optional)

To reverse the direction of the scroll, you can easily apply the following change in the animation property:

animation: scroll 15s linear infinite reverse;

This reverse option will make the marquee scroll from left to right instead of the default right-to-left direction.

Here’s an example of applying it:

.infinite-marquee {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: scroll 15s linear infinite reverse;
}

Step 6: Left-to-Right Scroll Option (Optional)

If you’d prefer the marquee to scroll from left to right instead of the default direction, you can modify the scroll animation like this:

@keyframes scroll {
  from {
    transform: translateX(calc(-100% - 2rem));
  }
  to {
    transform: translateX(0);
  }
}

Conclusion: Building a Seamless Marquee with Elementor

With this guide, you can easily create an infinite scrolling marquee using Elementor’s free version. This setup is fully responsive, ensuring smooth scrolling across all devices, and includes a unique hover animation that enhances user interaction.

Add this CSS to your site, customize the content, and you’re ready to create an eye-catching scrolling marquee on your WordPress website.