Vertical Card Sliding Animation using only HTML & CSS
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 CSS Vertical Card Carousel Animation.
In this Vertical Card Slider, 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 and 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 Cards Carousel 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:
Creative Product Card UI Design
Pure CSS 3D Flip Card on Hover
Responsive Owl-Carousel Card Slider
Product Card with Fly to Card Animation
Vertical Cards Sliding Animation [Source Codes]
To create this program [Vertical Card Slider]. 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 from this given link. Click here to download code files.
Originally published at https://www.codingnepalweb.com on January 31, 2021.
