Modern marquee text & images scrolling effect in Elementor

Category: ,

Here’s is the easiest way to create an auto-scrolling text marquee effect in Elementor for free.

Get the CSS code below:

.marquee {
  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);*/
}

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


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

@media only screen and (min-width: 360px) {
    .marquee__group span {
        font-size: 6.5vw;
    }
}

Need to get your website created by a professional?

Fill out the form below to get started.

Lead Gen Form