Logo Cloud + Quote (marquee)

Oneindige logo-marquee met centrale quote; pauzeert bij hover en reduced-motion.

"Bedrijven die niet mogen verliezen, kiezen NedDev."

Vertrouwd door 40+ merken in heel Nederland

SCHADE EXPERTSMME BOUWIMMERSIVECLAIMHANDLERGRASGROENNOVARAMOONAY SCHADE EXPERTSMME BOUWIMMERSIVECLAIMHANDLERGRASGROENNOVARAMOONAY

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Logo Cloud + Quote (marquee) · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="lcq">
  <div class="lcq__inner">
    <blockquote class="lcq__quote">"Bedrijven die niet mogen verliezen, kiezen NedDev."</blockquote>
    <span class="lcq__sub">Vertrouwd door 40+ merken in heel Nederland</span>
  </div>
  <div class="lcq__marquee" data-lcq>
    <div class="lcq__row">
      <span>SCHADE EXPERTS</span><span>MME BOUW</span><span>IMMERSIVE</span><span>CLAIMHANDLER</span><span>GRASGROEN</span><span>NOVARA</span><span>MOONAY</span>
      <span>SCHADE EXPERTS</span><span>MME BOUW</span><span>IMMERSIVE</span><span>CLAIMHANDLER</span><span>GRASGROEN</span><span>NOVARA</span><span>MOONAY</span>
    </div>
  </div>
</section>
</div>

/* Logo Cloud + Quote (marquee) · NedDev · eigen werk. */
.lcq{overflow:hidden;width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12);padding:56px 0;display:flex;flex-direction:column;justify-content:center}
.lcq__inner{max-width:900px;margin:0 auto;padding:0 28px 40px;text-align:center;box-sizing:border-box}
.lcq__quote{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(24px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
.lcq__sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#999;text-transform:uppercase}
.lcq__marquee{position:relative;overflow:hidden;border-top:1px solid rgba(10,10,10,.12);border-bottom:1px solid rgba(10,10,10,.12);padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lcq__row{display:flex;gap:56px;width:max-content;animation:lcq-scroll 28s linear infinite}
.lcq__marquee:hover .lcq__row{animation-play-state:paused}
.lcq__row span{font-family:'Boldonse',sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em;color:#0a0a0a;opacity:.55;white-space:nowrap;transition:opacity .25s,color .25s;cursor:default}
.lcq__row span:hover{opacity:1;color:#F5480F}
@keyframes lcq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.lcq__row{animation:none}}

// Logo Cloud + Quote (marquee) · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lcq')||root;
if(matchMedia('(prefers-reduced-motion: reduce)').matches){var r=root.querySelector('.lcq__row');if(r)r.style.animation='none';}
}
init(document.querySelector('.jouw-container'));

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →