Heart Trail Animation

This project is a simple web animation that uses the mouse movement of the user to generate heart icons that float around the screen. The heart icons are randomly sized and colored, and they disappear after a set amount of time. The animation is created using JavaScript and CSS, and it uses an external icon resource from the website Iconsfinder.com. The project provides a good example of how to use mouse movement and animation effects on a webpage, and how to incorporate external icon resources into a project.

Demo

You can try out the application by visiting this link.

Technologies Used

• HTML
• CSS
• JavaScript

Getting Started

To get started with this project, clone the repository and open the index.html file in your preferred web browser.

New Things I Learned

here are the main things I learned from this project:

• The website Iconsfinder.com provides a vast collection of icons that can be downloaded for free or purchased depending on the license and usage rights.
• The addEventListener("mousemove") function can be used to create interactive animations on a webpage that respond to the movement of the mouse.
• The filter: hue-rotate() property can be used to adjust the hue of an image or element and create a color effect.
• The pointer-events: none property can be used to disable mouse events on an element so that it does not interfere with other interactions on the webpage.

Challenges I faced

During my analysis of the code, I encountered two main challenges. Firstly, I was not familiar with the pointer-events property and struggled to remove a vacant span. However, upon learning about the property, I was able to use it effectively to disable mouse events on an element and prevent it from interfering with other interactions on the webpage.

Secondly, I was unsure about how to change the color of the heart icons used in the animation. However, I was able to overcome this challenge by learning about the filter: hue-rotate() property, which can be used to manipulate the hue and create color effects on elements.

Overall, although these challenges were initially difficult to navigate, they allowed me to learn new concepts and expand my knowledge of web development.