Marquee CSS Code

Code for infinite scrolling cards:

<script>
document.addEventListener("DOMContentLoaded", () => {
    const track = document.querySelector('.marquee-track');
    if (!track) return;
    const items = Array.from(track.children);
    let singleSetWidth = 0;
    
    items.forEach(item => {
        const style = window.getComputedStyle(item);
        singleSetWidth += item.offsetWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
    });
    track.style.setProperty('--scroll-distance', `-${singleSetWidth}px`);
    const originalContent = track.innerHTML;
    const screenWidth = window.innerWidth;
    let currentWidth = singleSetWidth;
    while (currentWidth < (screenWidth * 3)) {
        track.insertAdjacentHTML('beforeend', originalContent);
        currentWidth += singleSetWidth;
    }
    track.classList.add('is-ready');
});
</script>

<style>
.marquee-parent {
    overflow: hidden;
    width: 100%;
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 0 !important; 
    animation-play-state: paused; 
}
.marquee-parent:hover .marquee-track {
    animation-play-state: paused; 
}
.marquee-track.is-ready {
    animation: marquee-precision 5s linear infinite;
}
.marquee-track > * {
    flex-shrink: 0 !important;
    width: 300px; /* Set your card width */
    margin-right: 20px; /* Adjust this for spacing between cards */
}
@keyframes marquee-precision {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--scroll-distance)); }
}
</style>

To change the gap between the cards, change the margin-right property under .marquee-track > * and to change the width of the cards, the width property.

Adjust the scrolling speed by changing the value (5s) after marquee-precision under .marquee-track.is-ready. Increase the value to make it slow.

Code for fade overlays on both sides:

<style>
.marquee-parent {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.marquee-parent::before,
.marquee-parent::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px; /* Width of the fade - adjust as needed */
    z-index: 2;
    pointer-events: none;
}
.marquee-parent::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}
.marquee-parent::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}
</style>

To change the color of the fade overlays, change the hex values in the background property.