Creating an eye-catching and dynamic website is essential in today’s digital world. One effective way to enhance the visual appeal of your site is by incorporating a logo carousel with a blur effect. This feature not only makes your website look modern but also provides a smooth and engaging user experience. In this article, we will walk you through the process of creating a beautiful logo carousel using HTML and CSS. We will also provide you with a video tutorial and the code you need to implement this effect.
Why Use a Logo Carousel?
A logo carousel is a great way to showcase your partners, clients, or product logos in a visually appealing manner. It allows you to display multiple logos in a compact space, and the continuous scrolling effect can attract and retain the attention of your visitors. Adding a blur effect to the carousel can further enhance its visual appeal by giving it a sleek and polished look.
Benefits of Adding a Blur Effect
The blur effect adds a layer of sophistication to your carousel. It helps to smooth out transitions and can make the carousel look more professional. The blur effect also ensures that the focus remains on the logos, subtly drawing the viewer’s attention to the moving elements without overwhelming them with too much visual information.
How to Implement the Logo Carousel with Blur Effect
To create this stunning logo carousel, you will need to use HTML and CSS. The process involves setting up a basic HTML structure and then applying CSS styles to create the carousel effect and add the blur. The key elements include defining the carousel container, applying the animation for the scrolling effect, and using the backdrop-filter property to achieve the blur effect.
Step-by-Step Guide
- Set Up the HTML Structure: Begin by creating a simple HTML page with a container for your carousel. Inside this container, you will place the logos and a mask to create the blur effect.
- Apply CSS Styles: Use CSS to style the carousel container and its contents. You will need to define the dimensions, positioning, and animations. The backdrop-filter property will be used to apply the blur effect to the logos as they scroll.
- Add Animation: Implement keyframe animations in CSS to create the scrolling effect. This will make the logos move continuously from one side of the carousel to the other, creating a seamless loop.
- Fine-Tune the Effects: Adjust the blur intensity, contrast, and speed of the animation to match your design preferences. These tweaks will help you achieve the desired look and feel for your carousel.
Watch the Video Tutorial
For a detailed walkthrough, watch the video tutorial below. It provides a step-by-step guide to creating the logo carousel with a blur effect, making it easy to follow along and implement on your own website.
Copy the Code Below
You can copy the code provided below to get started with your own logo carousel. Simply paste it into your HTML and CSS files, and you will have a fully functional logo carousel with a blur effect.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Canvas Page</title>
<style>
body {
background: black;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
@keyframes moveBg {
from { background-position: 0 50%; }
to { background-position: -1134px 50%; }
}
.carousel {
--blur: 6px;
--contrast: 105%;
--speed: 13s;
height: 250px;
max-width: 700px;
width: 100%;
position: relative;
.mask {
position: absolute;
inset: 0;
background: #0000;
backdrop-filter: blur(var(--blur)) contrast(var(--contrast));
-webkit-backdrop-filter: blur(var(--blur)) contrast(var(--contrast)); /* so it works on Safari */
-webkit-mask: linear-gradient(90deg, #000 50px, #0000 175px calc(100% - 175px), #fff calc(100% - 50px));
pointer-events: none;
}
.logos {
animation: moveBg var(--speed) linear infinite;
position: absolute;
inset: 0;
background: url(https://assets.codepen.io/1506195/brands2.webp) 0 50% / 567px 75px repeat-x;
-webkit-mask: linear-gradient(90deg, #0000 5px, #000 50px calc(100% - 50px), #0000 calc(100% - 5px));
}
}
</style>
</head>
<div class="carousel">
<div class="logos"></div>
<div class="mask"></div>
</div>
</body>
</html>