Doorlopende logoband

A strip of client logos loops endlessly, fades out at the edges and pauses on hover; for social proof below a hero.

Zij gingen je voor

Ter Horst Bouw
Van Dijk Installatie
Notariaat Kooij
Bloem & Blad
Fysio Oost
Garage Bakker

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →