Double Click Heart Animation in HTML CSS & JavaScript

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.

~~$ads={1}~~

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

To create Double Click Heart Animation, follow the given steps line by line:

1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.

2. Create an index.html file. The file name must be index and its extension .html

3. Create a style.css file. The file name must be style and its extension .css

4. Create a script.js file. 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.

~~$ads={1}~~

First, paste the following codes into your index.html file.

HTML CODE:

<!DOCTYPE html>
<!-- Coding by CodingLab || www.codinglabweb.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.

CSS CODE:

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

JAVASCRIPT CODE:

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

Double Click Heart Animation in HTML CSS & JavaScript

Steps to Create Heart Animation in HTML CSS & JavaScript

Post a Comment

Post a Comment

About Us

Contact Form

Double Click Heart Animation in HTML CSS & JavaScript

Double Click Heart Animation in HTML CSS & JavaScript

Steps to Create Heart Animation in HTML CSS & JavaScript

You might like

Post a Comment

Post a Comment

Contact Form