Pure CSS Responsive Infinite Logo Carousel with Fade Effects

This is a pure CSS logo carousel that creates a responsive, endlessly scrolling logo display with fade effects using only HTML and CSS.

It’s a lightweight and performant way to showcase partner or technology logos without relying on JavaScript.

Features:

• Pure CSS: No JavaScript required. Lightweight and fast performance.
• Infinite Scroll: Logos scroll endlessly in a seamless loop.
• Responsive: The carousel adapts to different screen sizes.
• Fade Effect: A smooth gradient fade-out effect on the sides.
• Pause on Hover: Pauses all logo animations simultaneously when users hover over the container area.
• Highly Customizable: Easily change the logo size, animation speed, and number of visible logos using CSS custom properties.

Use Cases:

• “As Seen On” or Partner Sections: The most common use is for displaying a row of partner, client, or sponsor logos on a corporate homepage.
• Technology Stack Showcase: Useful for a project’s website to display the logos of the technologies, frameworks, and libraries used in its development.
• Client Showcase on Agency Sites: A web development agency can use it to present a scrolling list of client logos, adding a dynamic element to their portfolio page.
• E-commerce Brand Carousels: An online store could use this to scroll through the brands it carries, helping with brand discovery without taking up too much vertical space.

How to use it:

1. Place your logo images inside the <div class="container">:

<div class="container">
  <img src="path/to/your/logo1.png" alt="Logo 1">
  <img src="path/to/your/logo2.png" alt="Logo 2">
  <!-- Add more logos as needed -->
</div>

2. Apply the core CSS styles that handle the infinite scrolling animation:

• --s: Sets the width of each logo. Adjust this to fit the general size of your logo assets.
• --d: Controls the animation duration. A smaller value like 4s makes the scroll faster, while a larger value like 20s slows it down.
• --n: Defines the number of logos that should be visible inside the container at any given time. The component will calculate the spacing based on this value.

.container {
  --s: 150px; /* size of the logo */
  --d: 8s; /* animation duration*/
  --n: 4; /* number of visible logos */
  display: flex;
  overflow: hidden;
  mask: 
    linear-gradient(90deg,#0000, #000 10% 90%,#0000);
}
img {
  width: var(--s);
  offset: shape(from calc(var(--s)/-2) 50%,hline by calc(sibling-count()*max(100%/var(--n),var(--s) + 10px)));
  animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count());
}
@keyframes x { 
  to {offset-distance: 100%}
}
.container:hover img {
  animation-play-state: paused
}
/* extra styles */
.container {
  border: 1px solid;
  padding-block: 5px;
  margin: 20px auto;
}
:nth-child(2 of .container) img {
  animation-direction: reverse;
}
body {
  background: #ffefd5;
}

Performance Considerations:

We recommend keeping logo file sizes under 50KB each and using optimized formats like WebP or SVG.

The CSS animations run on the compositor thread, but excessive logo counts (over 20 items) may impact performance on lower-end devices.

Test animation smoothness across target devices and adjust the --d duration value if frame drops occur.

For production implementations, consider implementing lazy loading for logos outside the initial viewport and preloading critical logos to prevent animation stutters during image downloads.

FAQs

Q: Can I control the marquee direction or make it scroll backwards?
A: Yes, add animation-direction: reverse to the img selector to reverse the scroll direction. You can also create bidirectional marquees by applying different directions to separate container instances.

Q: How do I handle different logo aspect ratios?
A: Set object-fit: contain on the img elements and define consistent heights rather than widths. This maintains logo proportions while ensuring uniform vertical alignment across different logo shapes.

Q: How do I optimize this for mobile devices?
A: Reduce the --n value for smaller screens using media queries, and consider increasing the --d duration slightly to compensate for reduced screen real estate. Test performance on actual mobile devices as CSS animations can impact battery life on resource-constrained devices.