Hello everyone! In this blog, we will learn how to create card slider with water drop effects in HTML CSS and Javascript.
So, you know how websites are always trying to be cooler and more engaging? Well, there’s this rad thing in web design called a “card slider with water drop effects.” It’s like a fusion of interactive card slides and this mind blowing water drop animation.
Video Tutorial:
What’s a Card Slider with Water Drop Effects?
A card slider with water drop effects is like a fancy way to show stuff on a website. You’ve got these card things that can slide around, and when you touch or click them. It makes ripples and waves that look super cool.
How Does it Work?
Start with Card Sliders: These are like containers for stuff. You put different cards or pieces of content inside, and you can swipe through them left or right, depending on how it’s set up.
Water Drop Magic: When you play around with the card slider, you trigger this epic water drop effect. It’s got a few parts:
- Ripples: The interaction you do makes ripples spread out from where you touched. It’s like a water droplet hitting a surface.
- Waves: Sometimes, those ripples turn into waves that move across the cards. It’s all about making it feel real and fun.
- Reflections: Some designs get really wild with it and add reflections of the content inside the ripples. It’s like the cards are above the water, which looks seriously awesome.
Getting Interactive: You can set it up so the water drop thing happens when you tap, hover, or swipe. It’s all about making the website more fun to play with.
Make It Yours: The best part is that you can customize how it looks. You can make the ripples fast or slow, big or small, and match your website style.
How It Rocks Web Design
Keeps You Hooked: These card sliders with water drop effects are like magnets for your attention. You’ll want to explore and play around with them, which is super fun.
Lookin Real: It’s all about making the web look more like real life. The water drop thing adds some coolness to the website and makes it feel like you’re in the moment.
Focus on What Matters: Web designers can use it to show what’s most important. You can make the water drop effect happen on the stuff you want people to notice the most.
Tell a Story: You can use it to tell a story on your website. When you slide through the cards, it’s like flipping through pages of a book or unraveling a cool story.
Branding Magic: If you do it right, this water drop thing can become a big part of your website identity. People will remember your site because of it.
How to Get It on Your Website
If you’re into making your website the coolest place on the internet, here’s how you can do it:
Pick a Cool JavaScript Library: You’ll need to use some coding magic, like JavaScript. There are libraries like React, Vue.js, and cool ones like Swiper.js or Slick that can help make it happen.
Design the Stuff: Get creative with your cards or content blocks. Make them look amazing to match your website.
Add the Water Drop Effect: You’ll need to use HTML, CSS to make the water drop thing happen. It’s all about coding to create ripples, waves, and reflections.
Customize It: Make it your own by changing the size of ripples, the speed of waves, and how reflections look.
Get It Movin: Decide when and how the water drop thing kicks in. Does it happen when you tap, swipe, or just hover? You choose!
Speed It Up: Make sure your site loads fast and is super smooth. You want it to be an awesome experience for everyone.
Source Files – Card Slider Water Drop:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Water Drop Card Slider HTML CSS JS | Codehal</title>
<!-- swiper css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<!-- box icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="box mySwiper">
<div class="content swiper-wrapper">
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img1.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Lucas Franklin</span>
<span class="profession">Blogger</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bx-star' style="--clr:#ff0f5b"></i>
<i class='bx bx-star' style="--clr:#ff0f5b"></i>
</div>
<button style="--clr:#ff0f5b">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img2.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Flora Ocean</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bx-star' style="--clr:#be01fe"></i>
<i class='bx bx-star' style="--clr:#be01fe"></i>
</div>
<button style="--clr:#be01fe">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img3.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">John Kendric</span>
<span class="profession">YouTuber</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bx-star' style="--clr:#fea401"></i>
<i class='bx bx-star' style="--clr:#fea401"></i>
</div>
<button style="--clr:#fea401">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img4.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Kylian Onyx</span>
<span class="profession">UX Designer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bx-star' style="--clr:#ff0f5b"></i>
<i class='bx bx-star' style="--clr:#ff0f5b"></i>
</div>
<button style="--clr:#ff0f5b">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img5.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Zayla Clover</span>
<span class="profession">Backend Developer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bx-star' style="--clr:#be01fe"></i>
<i class='bx bx-star' style="--clr:#be01fe"></i>
</div>
<button style="--clr:#be01fe">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img6.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Jacob Aiden</span>
<span class="profession">Photographer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bx-star' style="--clr:#fea401"></i>
<i class='bx bx-star' style="--clr:#fea401"></i>
</div>
<button style="--clr:#fea401">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img7.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Hudson Matthew</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bxs-star' style="--clr:#ff0f5b"></i>
<i class='bx bx-star' style="--clr:#ff0f5b"></i>
<i class='bx bx-star' style="--clr:#ff0f5b"></i>
</div>
<button style="--clr:#ff0f5b">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img8.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Grace Aurora</span>
<span class="profession">Web Designer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bxs-star' style="--clr:#be01fe"></i>
<i class='bx bx-star' style="--clr:#be01fe"></i>
<i class='bx bx-star' style="--clr:#be01fe"></i>
</div>
<button style="--clr:#be01fe">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="card-content">
<div class="image">
<img src="img9.jpg" alt="">
</div>
<div class="name-profession">
<span class="name">Anthony Ezekiel</span>
<span class="profession">App Developer</span>
</div>
<div class="rating">
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bxs-star' style="--clr:#fea401"></i>
<i class='bx bx-star' style="--clr:#fea401"></i>
<i class='bx bx-star' style="--clr:#fea401"></i>
</div>
<button style="--clr:#fea401">View More</button>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- swiper js -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- custom js -->
<script src="script.js"></script>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #eff0f4;
}
.container {
position: relative;
max-width: 1200px;
width: 100%;
padding: 40px;
}
.container .box {
padding: 50px 30px;
overflow: hidden;
}
.image img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
opacity: .8;
border: 3px solid #fff;
}
.card {
position: relative;
width: 350px;
height: 350px;
background: transparent;
box-shadow:
inset 20px 20px 20px rgba(0, 0, 0, .05),
5px 25px 20px rgba(0, 0, 0, .05),
5px 20px 30px rgba(0, 0, 0, .05),
inset -20px -20px 25px rgba(255, 255, 255, .9);
border-radius: 61% 39% 52% 48% / 44% 59% 41% 56%;
transition: .5s ease-in-out;
}
.card:hover {
border-radius: 50%;
}
.card::before {
content: '';
position: absolute;
top: 50px;
left: 65px;
width: 35px;
height: 35px;
background: #fff;
border-radius: 50%;
opacity: .9;
}
.card::after {
content: '';
position: absolute;
top: 90px;
left: 85px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
opacity: .9;
}
.card .card-content {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 30px;
}
.card-content .name-profession {
display: flex;
align-items: center;
flex-direction: column;
margin-top: 10px;
color: #333;
}
.name-profession .name {
font-size: 20px;
font-weight: 600;
}
.name-profession .profession {
font-size: 15px;
font-weight: 500;
}
.card-content .rating {
display: flex;
align-items: center;
margin-top: 18px;
}
.card-content .rating i {
font-size: 22px;
color: var(--clr);
margin: 0 2px;
opacity: .75;
}
.card-content button {
position: relative;
padding: 8px 35px;
background: var(--clr);
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
cursor: pointer;
font-size: 16px;
color: #fff;
font-weight: 500;
opacity: .75;
margin-top: 30px;
}
.card-content button::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 55%;
height: 5px;
background: rgba(255, 255, 255, .5);
border-radius: 5px;
}
.box .swiper-button-next,
.box .swiper-button-prev {
color: #666;
}
.box .swiper-button-next {
right: 0;
}
.box .swiper-button-prev {
left: 0;
}
.box .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #666;
}JavaScript Code:
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 50,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});Conclusion
Card sliders with water drop effects are a whole new level of cool in web design. They make websites more exciting and give them a unique, unforgettable vibe. So, if you’re up for some web design adventure, give it a shot and make your website stand out from the rest. It’s like bringing a splash of fun to the internet!