Reacting to photos, videos & posts with likes, hearts, and other emojis has become a ubiquitous part of online communication, particularly on social media platforms. You may have reacted to Instagram or TikTok videos and posts just by double-clicking on them.
Today in this blog you will learn to create Double Click Heart Animation in HTML CSS & JavaScript. Upon double-clicking the image, an animated heart-shaped icon will appear.
If you’re eager to see the demonstration of the Double Click Heart Animation and interested in creating it yourself by following along, then you can refer to the video tutorial that’s available below.
Double Click Heart Animation in HTML CSS & JavaScript
I hope you enjoyed the video tutorial and this “Heart Animation on Double Click,” which was created in HTML, CSS, and JavaScript. I have explained all the with written comments to make you understand easily.
If you haven’t seen the video yet, you can continue reading this post to learn how to create Double Click Heart Animation step-by-step by yourself. Otherwise, you can go to the bottom of this page to copy or download the source code and files for this project.
Steps to Create Heart Animation in HTML CSS & JavaScript
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Double Click Heart Animation by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Double Click For Heart</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<i class="fa-solid fa-heart heart"></i>
</div>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Import Google font - Poppins */
@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 {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f6f7fb;
}
.container {
position: relative;
height: 420px;
width: 320px;
background-image: url("img.jpg");
background-size: cover;
background-position: center;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.heart {
position: absolute;
color: red;
font-size: 40px;
opacity: 0;
transform: translate(-50%, -50%);
}
.heart.active {
animation: animate 0.8s linear forwards;
}
@keyframes animate {
30% {
font-size: 80px;
opacity: 1;
}
50% {
opacity: 1;
font-size: 60px;
}
70% {
font-size: 70px;
}
80% {
font-size: 60px;
opacity: 1;
}
90% {
font-size: 60px;
opacity: 1;
}
}
Third, paste the following codes into your script.js file.
// Select the container and heart elements from the DOM
const container = document.querySelector(".container"),
heart = document.querySelector(".heart");
// Add a double-click event listener to the container
container.addEventListener("dblclick", (e) => {
// Calculate the x and y position of the double-click event
let xValue = e.clientX - e.target.offsetLeft,
yValue = e.clientY - e.target.offsetTop;
// Set the position of the heart element using the x and y values
heart.style.left = `${xValue}px`;
heart.style.top = `${yValue}px`;
// Add the active class to the heart element to animate it
heart.classList.add("active");
// Remove the active class after 1 second
setTimeout(() => {
heart.classList.remove("active");
}, 1000);
});
That’s all, now you’ve successfully created a project on Double Click Heart Animation. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
