Skip to content

HasibCoderLab/InstaHeart-Click-Animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ’– 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

Preview of  πŸ’– InstaHeart-Click-Animation

πŸ› οΈ Setup Instructions

  1. Clone the repository:

    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

Releases

No releases published

Packages

No packages published