https://github.com/hasibcoderlab/instaheart-click-animation
https://github.com/hasibcoderlab/instaheart-click-animation
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hasibcoderlab/instaheart-click-animation
- Owner: HasibCoderLab
- Created: 2025-06-28T15:50:49.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-06-30T05:44:37.000Z (8 months ago)
- Last Synced: 2025-06-30T06:34:37.179Z (8 months ago)
- Language: CSS
- Homepage: https://insta-heart-click-animation.vercel.app
- Size: 1.7 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💖 InstaHeart-Click-Animation - Instagram-Like Click Animation
This mini project recreates the iconic Instagram "double-tap heart" animation using HTML, CSS, and JavaScript. When you click on the image, a heart appears, scales up, and fades away—just like Instagram!
## 🚀 Features
- 📸 Image click animation
- ❤️ Heart icon that pulses and fades
- 🎨 Clean and responsive design
- ⚡ Lightweight and fast
## 🔧 Tech Stack
- HTML5
- CSS3
- JavaScript (Vanilla)
- Remix Icon CDN for heart icon
## 📂 Project Structure
```
InstaHeart/
├── index.html
├── style.css
├── script.js
└── images/
├── Photo.jfif
└── Icon/
└── icon.jfif
```
## 🖱️ How It Works
1. Click on the image.
2. A heart icon appears and scales up.
3. It then fades away smoothly after a short delay.
## 🎯 Use Case
This animation can be used in:
- Like systems
- Reaction buttons
- Interactive UI designs
## 📸 Preview
## 🛠️ Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/your-username/InstaHeart.git
```
2. Open the `index.html` file in your browser.
> No dependencies or installations needed. Pure frontend fun!
## 📬 Contact
Made with 💖 by **Mohammad Hasib Hasan**
🔗 GitHub: [@HasibCoderLab](https://github.com/HasibCoderLab)