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.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.
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.
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.
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.
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.