Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Double Click Heart Animation in HTML, CSS, and JavaScript
To make your website an even more enjoyable place for your users, feel free to add animations that will make interactions tastefully eye-candy. One of the widely used effects is heart animation which happens during double click on social media platforms. This article will teach you how to develop a double-click heart animation in HTML, CSS, and JavaScript.
Prerequisites
For this project, you only need basic knowledge of-
- HTML for structuring elements.
- CSS for styling and animations.
- JavaScript to add interactivity.
HTML Structure
We'll create a simple HTML structure that includes:
- A container for the animation.
- A placeholder for the heart icon.
index.html
<!DOCTYPE html>
<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>
CSS Styling
To make the heart visually appealing, we'll use CSS to define:
- The initial look of the heart.
- The animation effect when it appears.
style.css
/* style.css */
@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;
}
}
JavaScript Logic
Here we will make the heart to react on doble click.
script.js
// script.js
// 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);
});
Comlete Code of Double Click Heart Animation
Here we have combined the above HTML, CSS and JavaScript code so you can run it oon our portal.
<!DOCTYPE html>
<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>
<style>
@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;
}
}
</style>
<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>
<script>
// 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);
});
</script>
</body>
</html>
Output
Updated on: 2024-11-07T11:14:09+05:30
1K+ Views
Advertisements