.logo-marquee { width: 100%; overflow: hidden; padding:0; } .logo-track { display: flex; align-items: center; width: max-content; will-change: transform; } .logo-item { flex-shrink: 0; margin: 0 20px; } .logo-item img { height: 25px; width: auto; display: block; } /* Optional Fade Effect */ .logo-marquee:before, .logo-marquee:after { content: ""; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2; pointer-events: none; } /*.logo-marquee:before {*/ /* left: 0;*/ /* background: linear-gradient(to right, #fff, transparent);*/ /*}*/ /*.logo-marquee:after {*/ /* right: 0;*/ /* background: linear-gradient(to left, #fff, transparent);*/ } jQuery(document).ready(function ($) { let $track = $('.logo-track'); let speed = 0.8; let position = 0; let paused = false; $('.logo-marquee').hover( function () { paused = true; }, function () { paused = false; } ); function moveMarquee() { if (!paused) { position -= speed; let firstItem = $('.logo-item').first(); let firstItemWidth = firstItem.outerWidth(true); if (Math.abs(position) >= firstItemWidth) { $track.append(firstItem); position += firstItemWidth; } $track.css( 'transform', 'translateX(' + position + 'px)' ); } requestAnimationFrame(moveMarquee); } moveMarquee(); });