Flip Card Animation on Click

A rectangular or square container in website design that neatly organizes information about a company or person and serves it to visitors is called a card. There are many types of cards in web design. Some of these are Content Cards, Product Cards, Profile Cards, Media Cards, Interactive Cards, Event Cards, Testimonial Cards, Feature Cards, Dashboard Cards, Social Cards, Form Cards, Pricing Cards, Gallery Cards, etc. These cards are used according to the content of the website. Today we will give a flip card on click effect on a profile card. We used HTML CSS and Vanilla JavaScript to render this animation. The video tutorial below shows the step-by-step process of creating the snippet. We hope you watch the full video tutorial.

Video Tutorial:

We hope you have watched the video tutorial. Cards are special types of website content that contain images, text, and links, which make it easier for users to better understand the content of a particular website. This website content is especially useful for a responsive type of website. These cards can rearrange themselves based on the screen size. This way they can maintain usability across devices. With cards we can organize content beautifully, improving readability and user engagement. Another important feature of cards is that they can encourage users to explore further if the card contains a link.

A flip card on click is a type of card design where the card "flips" when clicked. Educational sites use this feature for quizzes, flashcards, or learning resources that reveal answers or additional content. Personal portfolio websites use this flip card feature to display projects with details on the back. E-commerce websites use the flip card effect for product previews. We have seen some snippets where we can flip the card on hover but here we have used HTML CSS and vanilla JavaScript to create the flip card on click effect. As we know, vanilla JavaScript refers to the use of plain JavaScript without additional frameworks or libraries. It is widely used for its performance, browser compatibility, flexibility, control, etc. Famous websites like Codepen, dribble, etc. use this flip card on-click feature.

You May Also like:

Flip Card Animation on Click [ Source Code ]:

To create the JavaScript snippet for the 'Flip Card Animation on Click' today, we will need to create an HTML file, a CSS file, and a js file. The entire process is shown in the video tutorial above. After that, Copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any problems. If the problem persists, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filp card using vanilla javascript</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="page" id="page1">
        <img src="1.jpg">
    </div>

    <div class="page" id="page2">
        <h2>Name: John Doe</h2>
        <h3>Designation: Designer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae augue ac justo pretium mollis.</p>
        <p class="socials">
            <i class="fa fa-facebook"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-pinterest"></i>
        </p>
    </div>

  <button onclick="flipPage()">Flip the Card</button>

    <script>
        function flipPage() {
    const page1 = document.getElementById("page1"); 
    const page2 = document.getElementById("page2");
    
    if (page1.style.transform === "") {
      page1.style.transform = "rotateY(-180deg)";
      page2.style.transform = "rotateY(0deg)";
    } else {
      page1.style.transform = "";
      page2.style.transform = "";
    }
  }
  
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #22242a;
}
.page {
	width: 300px;
	height: 400px;
	border-radius: 15px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	position: absolute;
	transition: transform 0.5s ease-in-out;
	transform-style: preserve-3d;
}
#page1 {
	overflow: hidden;
}
#page1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#page2 {
	transform: rotateY(180deg);
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: #fff;
	color: #22242a;
}
#page2 h2 {
	margin: 0;
	font-family: "Bebas Neue", sans-serif;
}
#page2 h3 {
	margin: 10px 0;
	font-size: 18px;
}
#page2 p {
	font-size: 16px;
	padding: 0 25px;
	line-height: 1.5;
}
.socials {
	margin-top: 25px;
}
.socials i {
	font-size: 21px;
	margin: 0 11px;
}
button {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px 30px;
	font-size: 18px;
	background: #1d5ef5;
	color: #fff;
	border: none;
	border-radius: 50px;
}

Flip card animations provide a compact, interactive method of displaying content and in this way, we can increase user engagement. Whether to utilize hover or click-flip animations depends on the website’s goals and the type of user interaction desired. Normally, hover is used for brief previews, and the click effect is used for in-depth interaction. We hope you liked this snippet. If you want more source code you can click the load more button on our homepage and scroll down the website. We hope you find something useful for your next project. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Flip Card Animation on Click [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Flip Card Animation on Click

Video Tutorial:

Flip Card Animation on Click [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form