css info card animation

How we can create a cool info card interaction using HTML CSS JS? Solution: See this CSS Info Card Animation With Splitting JS, Animated Card Interaction.

Previously I have shared an animated info window program, but this is the advance one. Basically, an info card give short information to users, the card also contains a link or button to see the whole content. Most of the info cards contain an image, heading, some texts, and a button or link to navigation. But we can create an advance info section with cool interaction.

Today you will learn to create an animated card interaction design. Basically, there are 3 different cards but it shows 1 card at a time. On the left side, there are navigation links to open the specific section. Each section contains an image, a heading, some text, and an arrow button to see the full content. When you will click the arrow button, then another section will open with some text, a background image, and a back button. All the interaction has a cool animation effect.

So, today I am sharing CSS Info Card Animation With Splitting JS. There I have used pure CSS for all the animation and function, but also I have used a JS library named Splitting JS for a split animation. This is a unique program with good UI design, you can use this to attract your users. You can place this program on your website after changing content.

If you are thinking now how this card interaction actually is, then see the preview given below.

Preview Of Animated Card Interaction

See this video preview to getting an idea of how this interaction looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

CSS Info Card Animation Source Code

Before sharing source code, let’s talk about it. First I have created the main div with an ID name container and placed all items inside it. I have created radio inputs for the navigation section, where you can change the card. Also, I have placed a checkbox input to create the arrow button. After that, I have created multiple divs for heading, text, and images. Also in the HTML file, I have linked other files like CSS and CDN links of libraries.

Now using CSS I have placed all the items in the right place, as you can see in the preview. There CSS has a big bunch of codes because there is no custom JS. There I have given condition to each element when its active using nth-of-type command. I have used CSS transition command to create the animation effect. The CSS codes are long and complicated to explain.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create only 2 files because there is 1 one line of JS which I have placed in the HTML file. Create an HTML file and a CSS file. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

That’s It. Now you have successfully created CSS Info Card Animation With Splitting JS, Animated Card Interaction Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

LEAVE A REPLY

Please enter your comment!
Please enter your name here