(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Required for Custom CSS.
1 – Elementor Pro
DMMOTIONARTS
SUBSCRIBE
LIKE
DMMOTIONARTS
SUBSCRIBE
LIKE
DMMOTIONARTS
SUBSCRIBE
LIKE
DMMOTIONARTS
SUBSCRIBE
LIKE
Infinite Text Scroll Effect with Elementor CSS
Make sure to have same amount of span texts in both marquee group below.
<div class="marquee">
<div class="marquee__group">
<span>DMMOTIONARTS</span>
<span>SUBSCRIBE</span>
<span>LIKE</span>
<span>DMMOTIONARTS</span>
<span>SUBSCRIBE</span>
<span>LIKE</span>
</div>
<div class="marquee__group" aria-hidden="true">
<span>DMMOTIONARTS</span>
<span>SUBSCRIBE</span>
<span>LIKE</span>
<span>DMMOTIONARTS</span>
<span>SUBSCRIBE</span>
<span>LIKE</span>
</div>
</div>
.marquee {
display: flex;
height: 10vh;
gap: 20px;
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 20px;
min-width: 100%;
animation: scroll 30s linear infinite reverse;
}
.marquee__group span {
color: white;
font-size: 4vw;
font-weight: 700;
white-space: nowrap;
font-family: Montserrat !important;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 2rem));
}
}
/*Tablet Responsiveness*/
@media (max-width:1024px) {
.marquee {
height: 8vh;
gap: 20px;
}
.marquee__group span {
font-size: 5vw;
font-weight: 700;
gap: 20px;
}
}
/*Mobile Responsiveness*/
@media (max-width:767px) {
.marquee {
height: 6vh;
gap: 20px;
}
.marquee__group span {
font-size: 5vw;
font-weight: 700;
gap: 20px;
}
}
Infinite Image Carousel Scroll with Elementor CSS
The code below simply makes the carousel to linear transition instead of the default ease transition.
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
