Get Ready Elementor Templates

How To Make Double-layered Text Marquee Using Elementor Free

Subscribe To My YouTube Channel For More Upcoming Videos

   

Top Layer Style CSS



 

Top Layer Style CSS Class


marquee-box

 

Bottom Layer Style CSS


.marquee-box-2{
    left: -5%;
    transform: rotate(-2.5deg);
     
}
@media (max-width: 767px){
.marquee-box-2{
    left: 0%;
}
}

 

Bottom Layer Style CSS Class


marquee-box-2

 

Top Layer Auto Scrolled Animation CSS


.marquee {
  animation: marquee 25s linear infinite;
  
}


@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

 

Top Layer Auto Scrolled Animation CSS Class


marquee

 

Bottom Layer Auto Scrolled Animation CSS


.marquee-2{
    animation: marquee-2 25s linear infinite;
}



@keyframes marquee-2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

 

Bottom Layer Auto Scrolled Animation CSS Class


marquee-2