About this snippet

A row of client or partner logos sliding continuously in one direction.

The seamless loop depends on duplicating the logo list in the markup and translating the track by exactly half its width. When the animation restarts, the second copy is sitting where the first one started, so nothing appears to move. The duplicate is required, not decorative.

Hovering pauses it with animation-play-state. The faded edges are two pseudo-elements holding gradients that match the page background, so change those if your background is not white.

Size
2.2 KB
Uses
HTML, CSS
Loads
placehold.co
Views
565

Collections

Related snippets

<div class="marquee-container">
  <div class="marquee-content">
    <div class="logo-item"><img src="https://placehold.co/150x50/3b82f6/ffffff?text=Brand+A" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/ec4899/ffffff?text=Brand+B" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/10b981/ffffff?text=Brand+C" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/f59e0b/ffffff?text=Brand+D" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/8b5cf6/ffffff?text=Brand+E" alt="Brand"></div>
    <!-- Duplicate items for seamless loop -->
    <div class="logo-item"><img src="https://placehold.co/150x50/3b82f6/ffffff?text=Brand+A" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/ec4899/ffffff?text=Brand+B" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/10b981/ffffff?text=Brand+C" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/f59e0b/ffffff?text=Brand+D" alt="Brand"></div>
    <div class="logo-item"><img src="https://placehold.co/150x50/8b5cf6/ffffff?text=Brand+E" alt="Brand"></div>
  </div>
</div>
.marquee-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  overflow: hidden;
  background: #fff;
  padding: 40px 0;
  white-space: nowrap;
  position: relative;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}
.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

.marquee-content {
  display: inline-flex;
  animation: scroll 20s linear infinite;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

.logo-item {
  margin: 0 30px;
}

.logo-item img {
  height: 50px;
  opacity: 0.7;
  transition: opacity 0.3s;
  cursor: pointer;
}

.logo-item img:hover {
  opacity: 1;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save