[0:00]Have you ever seen websites with smooth endless scrolling and wondered how they do it? In this video, we're going to build an awesome infinite horizontal scroll animation using only CSS.
[0:12]You'll learn how to create a smooth looping slider for logos, images and brand sections. We'll also add some cool hover effects like pausing the animation and highlighting images to give the design a clean, modern look. So, let's get started!
[0:26]First, we're going to create the main structure using a carousel container and a track div that holds all the image items.
[0:33]Each image will be wrapped inside its own item div. Next, we'll jump into CSS and style the carousel with a width of 90%.
[0:43]Then we'll style the track using display flex and width max content, so all the items stay in one horizontal row. We'll also add will change transform to make the animation smoother.
[0:57]Now, let's style the item divs by setting the width to 240 pixels, height to 200 pixels, flex shrink zero, border radius and spacing between the items.
[1:10]After that, we'll style the images using width and height set to 100%, object fit, cover, and display block. The images already look much better.
[1:23]To make the rounded corners work correctly, we'll add overflow hidden to the item div. This gives us clean rounded image cards.
[1:33]There's still one problem though, the images overflow outside the container. To fix that, we'll add overflow hidden to the main carousel container.
[1:42]This is really important because it hides the extra scrolling content outside the slider. Next, let's animate the slider.
[1:49]We'll apply a scrolling animation to the track, then create key frames that move the track using transform translate X -50%.
[2:00]At first, the animation creates a small glitch when it restarts. So, here's the trick. We'll duplicate all the items again.
[2:08]This creates a seamless loop because when the first set ends, the second set is already ready to continue the animation smoothly.
[2:18]And just like that, the glitch is gone. That's the secret behind infinite sliders. Now let's make the slider more interactive.
[2:24]When users hover over the carousel, all the images become gray scale. But when hovering over a specific image, the gray scale is removed and the image slightly zooms in.
[2:37]If the gray scale effect doesn't remove correctly, we can use exclamation point important on the hover filter. Next, let's improve the user experience even more.
[2:47]We'll pause the animation on hover using animation play state paused, so users can focus on the images more easily. We'll also add smooth transitions to make the hover effects feel cleaner.
[2:57]Now, let's improve the edges of the slider. We'll add a fade effect using mask image. This creates a smooth transparent fade on both sides and gives the slider a modern professional look.
[3:10]The slider already looks great on large screens, but on smaller screens, the images are still too big.
[3:19]So finally, we'll make everything responsive using media queries. First, we'll add a media query for max width 768 pixels.
[3:28]Inside it, we'll increase the carousel width, image sizes, border radius, and spacing between items. Then we'll add another media query for max width 480 pixels.
[3:41]Inside it, we'll increase the carousel width to 100%, adjust the mask image, reduce the item width to 140 pixels, height to 110 pixels, reduce the border radius, and spacing to 10 pixels.
[3:55]So everything fits perfectly on mobile devices. Finally, we'll increase the animation duration on smaller screens to make the scrolling slower and smoother.
[4:05]Now, let's create a logo slider. The structure will stay the same as before, using a carousel container, a track div, and multiple item divs for the logos.
[4:15]Next, we'll add some basic styles to make the logo slider look clean and professional. Now, let's create a reverse slider.
[4:24]To do that, we'll add reverse true to the main carousel container. Then we'll target carousel reverse true, track and apply animation direction reverse.
[4:35]This will make the slider move in the opposite direction. This technique works great when creating multiple slider rows with different scrolling directions because it makes the design feel more dynamic and visually interesting.
[4:48]It also looks perfect on all screen sizes, and that's it. We've created a fully responsive infinite horizontal scroll animation using only CSS.
