SMOOTH INFINITE MARQUEE with text or image - Elementor and HTML, CSS
Create captivating, endlessly scrolling marquees with text or images effortlessly using the Smooth Infinite Marquee feature in Elementor for WordPress. Utilizing HTML and CSS, enhance your website with dynamic motion, seamlessly grabbing attention and guiding visitors through your content with finesse.
SMOOTH INFINITE MARQUEE with text
HTML
<div class="marquee">
<div class="marquee__group">
<span>hello there ➺</span>
<span>hello there ➺</span>
<span>hello there ➺</span>
</div>
<div class="marquee__group" aria-hidden="true">
<span>hello there ➺</span>
<span>hello there ➺</span>
<span>hello there ➺</span>
</div>
</div>
CSS
.marquee {
display: flex;
overflow: hidden;
height: 10vh;
user-select: none;
gap: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
/*background-color: green;*/
/*transform: skewY(-3deg); */
/*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}
.marquee:hover {
-webkit-text-stroke: 1.5px #fff;
text-stroke: 1.5px #fff;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
transition: all 0.5s ease;
-webkit-font-smoothing: antialiased;
/*-moz-osx-font-smoothing: grayscale;*/
}
.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;
}
.marquee__group span {
color: white;
font-size: 5vw;
font-weight: 800;
white-space: nowrap;
font-family: 'Syne', sans-serif !important;
/*text-transform: uppercase;*/
}
@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;
}
}
SMOOTH INFINITE MARQUEE with IMAGE
HTML
<div class="marquee__three marquee--hover-pause">
<div class="marquee__group__three">
<img src='add your own link' alt=''>
<img src='add your own link' alt=''>
<img src='add your own link' alt=''>
</div>
<div aria-hidden="true" class="marquee__group__three">
<div class="marquee__group__three">
<img src='add your own link' alt=''>
<img src='add your own link' alt=''>
<img src='add your own link' alt=''>
</div>
</div>
</div>
CSS
.marquee__three {
display: flex;
overflow: hidden;
height: 68vh;
user-select: none;
gap: .1rem;
padding-top: 2rem;
padding-bottom: 2rem;
/*transform: rotate(-5deg) translateY(-100px) translateX(50px);*/
/*animation: scroll 18s linear infinite;*/
/*background-color: green;*/
/*transform: skewY(-8deg); */
/*-webkit-mask-image:radial-gradient(rgba(0, 0, 0,1) 15%, transparent 68%);*/
/*mask-image: linear-gradient(transparent, black 10%, black 70%, transparent 100%);*/
}
.marquee--hover-pause:hover .marquee__group__three {
animation-play-state: paused;
}
.marquee__group__three {
flex-shrink: 0;
display: flex;
align-items: center;
/*justify-content: space-between;*/
gap: .1rem;
min-width: 100%;
animation: scroll 30s linear infinite reverse;
}
.marquee__group__three img:hover {
transition: all 0.5s ease-in-out;
/*transform: skewY(-8deg);*/
transform: scale(1.1);
background-color: #c1532f;
object-fit: cover;
aspect-ratio: 1;
border-radius: 50%;
will-change: transform;
margin-top: 1rem;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - .1rem));
}
}