Hey friends, today in this blog you’ll learn how to create Vertical Card Sliding Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Responsive Owl-Carousel Card Slider using HTML CSS & jQuery and now I’m going to create pure CS Vertical Card Carousel Animation.
In this Vertical Card Slider Animation, there are five minimal cards with profile image, username, user profession, and a follow button. All these cards slide vertically and appear one by one. On the webpage, there are only three cards that appear out of five, and only the center one card has full opacity.
The other two cards are a little bit fade out and that you can also see in the preview image. When these cards are sliding and you hover on them then the animation of the cards will be paused which means it stops sliding.
The best thing about this animation and design is, it is created using only HTML & CSS. If you’re feeling difficult to understand what I’m saying and want to see a demo of this design or video tutorial then you can watch a full video tutorial of this Vertical Card Slider Animation with the demo.
Video Tutorial of Vertical Card Sliding Animation
In the video, you have seen the full video tutorial of Vertical Card Slider and you have known, this is a pure CSS program. If you are a beginner and you know a little bit of HTML & CSS then you can also create this type of card with creative animation.
To create this follow button of this card, I used <a> tag so if you want to redirect your user to the particular wite then you can simply put the link of that site inside href attribute of anchor tag like this: <a href=”your_link_here” target=”_blank”>
To create this animation of this design I used the CSS animation property that’s it. If you like this animation and want to get source codes of this card then you can easily copy all the codes from the given copy boxes or you can also download source code files from the given download button and I also recommend you to download the files.
You might like this:
Vertical Card Sliding Animation [Source Codes]
To create this program [Vertical Card Sliding Animation]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this sliding card animation from the below download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on these cards won’t appear. You’ve to download files from the given download button to use images also.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Card Slider | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="card" style="--delay:-1;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Sumit Kapoor</span>
<p>Frontend Developer</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:0;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Andrew Neil</span>
<p>YouTuber & Blogger</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:1;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Jasmine Carter</span>
<p>Freelancer & Vlogger</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:2;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Justin Chung</span>
<p>Backend Developer</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:2;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Adrina Calvo</span>
<p>Teacher & Advertiser</p>
</div>
</div>
<a href="#">Follow</a>
</div>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}
.wrapper .outer{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .card{
background: #fff;
width: 430px;
display: flex;
align-items: center;
padding: 20px;
opacity: 0;
pointer-events: none;
position: absolute;
justify-content: space-between;
border-radius: 100px 20px 20px 100px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
animation: animate 15s linear infinite;
animation-delay: calc(3s * var(--delay));
}
.outer:hover .card{
animation-play-state: paused;
}
.wrapper .card:last-child{
animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
0%{
opacity: 0;
transform: translateY(100%) scale(0.5);
}
5%, 20%{
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
25%, 40%{
opacity: 1;
pointer-events: auto;
transform: translateY(0%) scale(1);
}
45%, 60%{
opacity: 0.4;
transform: translateY(-100%) scale(0.7);
}
65%, 100%{
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
}
.card .content{
display: flex;
align-items: center;
}
.wrapper .card .img{
height: 90px;
width: 90px;
position: absolute;
left: -5px;
background: #fff;
border-radius: 50%;
padding: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.card .img img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.card .details{
margin-left: 80px;
}
.details span{
font-weight: 600;
font-size: 18px;
}
.card a{
text-decoration: none;
padding: 7px 18px;
border-radius: 25px;
color: #fff;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
transition: all 0.3s ease;
}
.card a:hover{
transform: scale(0.94);
}
That’s all, now you’ve successfully created a Vertical Card Sliding Animation using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Dear CodingNepal, I would like to thank all your team for this great work that you are doing, and I wish if you’re team can add tutorials in ReactJS Angular and Vue, and if Possible section for the course where the student can start from Introduction up to advance level.
Best Regards
(RELATED ARTICLESMORE FROM AUTHOR)
Pls Make this sliders tutorial.
Serious question, this could be a Blogger widget? one of those on the side, I tried to apply it but it gave me several failures.
I really like Your Tutorials. This website helps me a lot for web dev.
Happy to hear that 🙂
Would you help me out here. If I add more than the 4 elements, I can’t figure out the –delay: ?? part and it looks kind of hacky after I do it.
I would really appreciate if anyone helps me out here.
Link to the code – https://jsfiddle.net/1szopdu7/
you are really amazing thank you very much for your tutorials and source codes| i have a content for you that can you make a card with some buttons like copy button??
I like CodingNepal, tutorials are best!