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!
- πΈ Image click animation
- β€οΈ Heart icon that pulses and fades
- π¨ Clean and responsive design
- β‘ Lightweight and fast
- HTML5
- CSS3
- JavaScript (Vanilla)
- Remix Icon CDN for heart icon
InstaHeart/
βββ index.html
βββ style.css
βββ script.js
βββ images/
βββ Photo.jfif
βββ Icon/
βββ icon.jfif
- Click on the image.
- A heart icon appears and scales up.
- It then fades away smoothly after a short delay.
This animation can be used in:
- Like systems
- Reaction buttons
- Interactive UI designs
-
Clone the repository:
git clone https://github.com/your-username/InstaHeart.git
-
Open the
index.html
file in your browser.
No dependencies or installations needed. Pure frontend fun!
Made with π by Mohammad Hasib Hasan
π GitHub: @HasibCoderLab