A small and fun JavaScript plugin that shows floating heart animations wherever the user clicks.
Perfect for playful websites, love-themed pages, or interactive UI effects.
- Floating heart effect on each click
- Lightweight and fast (~2KB gzipped)
- Fully standalone (no dependencies)
- Random color hearts
- Runs on all modern browsers
- Works with any website layout
Use this jsDelivr link:
<script src="https://cdn.jsdelivr.net/gh/mukeshkushwahae/click-heart-animation@main/dist/click-heart-animation.min.js" defer></script>
<script>
window.addEventListener("DOMContentLoaded", () => {
ClickHeartAnimation.init()
});
</script>Paste this at the end of your <body> tag.
- Clone or download the repo:
git clone https://github.com/mukeshkushwahae/click-heart-animation.git- Copy the file:
dist/click-heart-animation.min.js
- Add to your HTML:
<script src="your-path/click-heart-animation.min.js" defer></script>
<script>
window.addEventListener("DOMContentLoaded", () => {
ClickHeartAnimation.init()
});
</script>- On every user click, a floating heart appears and animates upward.
- The heart has a random color and gentle fade-out effect.
- The script uses
requestAnimationFramefor smooth animation. - No external libraries — pure JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Heart Animation</title>
</head>
<body>
<h1>Click anywhere to see floating hearts 💖</h1>
<script src="https://cdn.jsdelivr.net/gh/mukeshkushwahae/click-heart-animation@main/dist/click-heart-animation.min.js" defer></script>
<script>
window.addEventListener("DOMContentLoaded", () => {
ClickHeartAnimation.init()
});
</script>
</body>
</html>MIT License © Mukesh Kushwaha