Doorlopende logoband

<!-- Doorlopende logoband · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-llp"><span class="ei-llp__k">Zij gingen je voor</span><div class="ei-llp__vp"><ul class="ei-llp__tr"><li><i class="ei-llp__m ei-llp__m--sq"></i>Ter Horst Bouw</li><li><i class="ei-llp__m ei-llp__m--ci"></i>Van Dijk Installatie</li><li><i class="ei-llp__m ei-llp__m--tr"></i>Notariaat Kooij</li><li><i class="ei-llp__m ei-llp__m--ln"></i>Bloem &amp; Blad</li><li><i class="ei-llp__m ei-llp__m--sq"></i>Fysio Oost</li><li><i class="ei-llp__m ei-llp__m--ci"></i>Garage Bakker</li></ul></div></div>
</div>

/* Doorlopende logoband · NedDev · eigen werk. */
.ei-llp{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
.ei-llp__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.5)}
.ei-llp__vp{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.ei-llp__tr{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:ei-llp-run 22s linear infinite}
.ei-llp__vp:hover .ei-llp__tr{animation-play-state:paused}
.ei-llp__tr li{display:flex;align-items:center;gap:8px;padding:0 22px;font-family:'Switzer',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em;color:#0a0a0a;white-space:nowrap;opacity:.7;transition:opacity .2s}
.ei-llp__tr li:hover{opacity:1}
.ei-llp__m{display:inline-block;width:14px;height:14px;background:#0a0a0a;flex:none}
.ei-llp__m--ci{border-radius:50%;background:#F5480F}
.ei-llp__m--tr{width:0;height:0;background:none;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid #0a0a0a}
.ei-llp__m--ln{height:4px;width:18px;box-shadow:0 6px 0 #0a0a0a,0 -6px 0 #0a0a0a}
@keyframes ei-llp-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ei-llp__tr{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

// Doorlopende logoband · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var tr=root.querySelector('.ei-llp__tr');if(!matchMedia('(prefers-reduced-motion: reduce)').matches){[].slice.call(tr.children).forEach(function(li){var c=li.cloneNode(true);c.setAttribute('aria-hidden','true');tr.appendChild(c);});}
}
init(document.querySelector('.jouw-container'));