Pure CSS: Infinite Horizontal Scrolling Logo Display
10 November 20244 min read
Creating an infinite horizontal logo scroll effect with pure CSS is a simple yet powerful way to add dynamic movement to a website. This tutorial will walk you through building an infinite scroll effect with added hover effects that allow the user to pause scrolling and scale each logo slightly when hovered.
Step 1: HTML Structure
To start, we’ll create an HTML structure with a container that holds all the logos. To ensure a smooth infinite scroll effect, each logo will be duplicated.
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta6 name="viewport"7 content="width=device-width, initial-scale=1.0" />8 <title>Build an Infinite Horizontal Scrolling Logo Display</title>9 <link10 rel="stylesheet"11 href="style.css" />12 </head>13 <body>14 <div class="logo-container">15 <div class="logo-scroll">16 <div class="logo-scroll__wrapper">17 <div class="logo-item"></div>18 <div class="logo-item"></div>19 <div class="logo-item"></div>20 <div class="logo-item"></div>21 <div class="logo-item"></div>22 <div class="logo-item"></div>23 <div class="logo-item"></div>24 <div class="logo-item"></div>25 </div>26 <div class="logo-scroll__wrapper">27 <div class="logo-item"></div>28 <div class="logo-item"></div>29 <div class="logo-item"></div>30 <div class="logo-item"></div>31 <div class="logo-item"></div>32 <div class="logo-item"></div>33 <div class="logo-item"></div>34 <div class="logo-item"></div>35 </div>36 </div>37 </div>38 </body>39 </html>
This HTML structure sets up the necessary elements to create an infinite horizontal scrolling logo display. The logos will be placed inside logo-item divs, which are grouped into logo-scroll__wrapper divs. These wrappers are animated via CSS to scroll infinitely.
This HTML is structured to work seamlessly with the provided CSS for smooth, infinite scrolling, and scalable logo elements.
Step 2: CSS Styling and Animation
Now we’ll add the CSS styles to control the scrolling effect, add a hover-pause, and scale the logos slightly on hover.
1 /* Container to limit the scroll width */2 .logo-container {3 /* Setting custom properties for logo dimensions, spacing, and animation duration */4 --logo-width: 200px; /* Width of each logo */5 --logo-height: 100px; /* Height of each logo */6 --gap: calc(var(--logo-width) / 14); /* Space between logos, calculated based on logo width */7 --duration: 60s; /* Duration of the scroll animation */8 --scroll-start: 0; /* Start position of scroll animation */9 --scroll-end: calc(-100% - var(--gap)); /* End position of scroll animation */1011 display: flex; /* Aligns children in a row */12 flex-direction: column; /* Stacks content vertically */13 gap: var(--gap); /* Adds space between child elements */14 margin: auto; /* Centers container horizontally */15 max-width: 100vw; /* Limits width to the viewport */16 }1718 /* Scrolling area */19 .logo-scroll {20 display: flex; /* Aligns logos in a horizontal row */21 overflow: hidden; /* Hides overflow to create infinite scroll effect */22 user-select: none; /* Disables text selection */23 gap: var(--gap); /* Space between logos */24 mask-image: linear-gradient(25 to right,26 hsl(0 0% 0% / 0),27 hsl(0 0% 0% / 1) 30%,28 hsl(0 0% 0% / 1) 70%,29 hsl(0 0% 0% / 0)30 ); /* Adds a gradient mask to fade edges */31 }3233 .logo-scroll__wrapper {34 flex-shrink: 0; /* Prevents wrapper from shrinking */35 display: flex; /* Aligns logos horizontally */36 align-items: center; /* Centers logos vertically */37 justify-content: space-around; /* Distributes logos evenly */38 gap: var(--gap); /* Adds spacing between logos */39 min-width: 100%; /* Wrapper width covers full viewport */40 animation: scroll var(--duration) linear infinite; /* Infinite scrolling animation */41 }4243 .logo-scroll__wrapper:nth-child(even) {44 margin-left: calc(var(--logo-width) / -2); /* Offsets even wrappers for smooth scroll overlap */45 }4647 .logo-scroll__wrapper:hover {48 animation-play-state: paused; /* Pauses animation when wrapper is hovered */49 }5051 /* Logo styling */52 .logo-item {53 width: var(--logo-width); /* Sets width of each logo */54 height: var(--logo-height); /* Sets height of each logo */55 /* transition: transform 0.5s; Smooth scaling effect */56 background-color: blue; /* Background color for logos */57 border-radius: 4px; /* Rounds the logo corners */58 }5960 .logo-scroll .logo-item:hover {61 transform: scale(1.05); /* Slightly enlarges logo when hovered */62 }6364 /* Infinite scroll animation */65 @keyframes scroll {66 from {67 transform: translateX(var(--scroll-start)); /* Animation start position */68 }69 to {70 transform: translateX(var(--scroll-end)); /* Animation end position */71 }72 }
Summary of Functionality:
- Container and Scroll Properties: The
.logo-containersets up the layout, .logo-scrollmanages the scroll area, and.logo-scroll__wrapperanimates the scrolling. - Hover Effects: Hovering over
.logo-scroll__wrapperpauses the scroll animation, and hovering over.logo-itemscales the logos slightly for interaction. - Infinite Scroll Animation: The
@keyframes scrollmoves the entire.logo-scroll__wrapperhorizontally from the start to end position, creating a seamless loop.
This setup is fully responsive and adaptable; adjust sizes, timings, and spacing as needed for your layout.
These combined elements create a smooth, interactive, infinite-scrolling logo display with CSS-only animations.
Tips for Optimization
- Scroll Speed: Adjust the 60s duration for faster or slower scrolling.
- Hover Effect: Try different scaling percentages or easing effects to customize the hover appearance.
- Responsive Adjustments: You can set logo sizes with relative units like vw or em for responsive behavior.
Result
This approach is purely CSS-based, easy to implement, and a great way to add interactive design elements to a webpage without JavaScript. Adjust the styling as needed to create a smooth, visually appealing, and responsive scrolling logo display.