CSS solution
continuous marquee-style loop
- CSS Classes : icon-loop-marquee
/* Wrapper */
.icon-loop-marquee {
overflow: hidden;
white-space: nowrap;
position: relative;
}
/* Icon list container */
.icon-loop-marquee .elementor-icon-list-items {
display: inline-flex;
gap: 40px;
animation: iconMarquee 25s linear infinite;
will-change: transform;
}
/* Individual item styling */
.icon-loop-marquee .elementor-icon-list-item {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Pause on hover (optional but professional) */
.icon-loop-marquee:hover .elementor-icon-list-items {
animation-play-state: paused;
}
/* Animation */
@keyframes iconMarquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
Sticky Header
- CSS Classes : sticky-header
.sticky-header {
top: -110px !important;
z-index: -1;
transition: top is ease !important;
}
.sticky-header.elementor-sticky–effects {
top: 0 !important;
}
Text Mask effect
selector .elementor-heading-title {
background-image: url(‘YOUR-IMAGE-URL-HERE’);
background-size: cover;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}