Banner

Heart Trail Animation | HTML CSS JS project | javascript project

ADMIN July 17, 2024

Create a Mesmerizing Heart Trail Animation with JavaScript

Want to add a touch of magic to your web page? This tutorial will guide you through creating a captivating heart trail animation using JavaScript and CSS. As you move your mouse across the screen, a trail of colorful hearts will follow, leaving a shimmering effect.


What We'll Build:

A simple webpage with a black background where hearts of varying sizes and colors appear wherever you move your mouse. These hearts will slowly fade and rise upwards, creating a mesmerizing trail effect.





Tools and Technologies:

  • HTML: The foundation of our web page structure.

  • CSS: Used to style the hearts and create the animation effect.

  • JavaScript: Adds interactivity by capturing mouse movements and generating the hearts.


Step 1: Setting Up the HTML Structure

  1. Create a new HTML file and name it index.html.

  2. Add the following basic structure:


HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Heart Trail Animation</title>

    <link rel="stylesheet" href="style.css" />

</head>

<body>

    </body>

</html>


This code defines the basic structure of our web page. It includes the DOCTYPE declaration, HTML language specification, meta tags for character encoding and responsiveness, a title, and links the external CSS file (style.css) where we'll define the styles for our hearts. Finally, we have an empty body section where our JavaScript will add the hearts dynamically.


Step 2: Styling the Hearts with CSS

  1. Create a new CSS file and name it style.css.

  2. Add the following styles to define the appearance and animation of the hearts:


CSS

body {

    margin: 0;

    height: 100vh; /* Set body height to 100% of viewport */

    background: #000; /* Black background */

    overflow: hidden; /* Hide any content overflowing the viewport */

}


span {

    background: url('https://cdn4.iconfinder.com/data/icons/essentials-72/24/028_-_Heart-256.png'); /* Heart icon image */

    height: 100px;

    width: 100px;

    position: absolute; /* Position hearts absolutely */

    pointer-events: none; /* Prevent clicks on hearts */

    background-size: cover;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%); /* Center the initial heart */

    animation: animate 10s linear; /* Apply the animation named 'animate' */

}


@keyframes animate {

    0% {

      transform: translate(-50%, -50%); /* Start position */

      opacity: 1; /* Full opacity */

      filter: hue-rotate(0); /* No color rotation */

    }

    100% {

      transform: translate(-50%, -5000%); /* Move upwards */

      opacity: 0; /* Fade out */

      filter: hue-rotate(720deg); /* Rotate color spectrum */

    }

  }


This CSS code styles the hearts. We set the body styles for a black background, full viewport height, and hidden overflow. The span element styles define the heart properties like size, positioning, background image (feel free to replace the URL with your own heart icon), and animation application.


The @keyframes animate block defines the animation itself. It includes two keyframes: 0% and 100%. At 0%, the heart starts in the center (translated by -50% on both axes), has full opacity, and no color rotation filter. As the animation progresses to 100%, the heart moves upwards significantly (-5000% on the y-axis), fades out to 0 opacity, and rotates through the entire color spectrum using the hue-rotate filter.


Step 3: Adding Interactivity with JavaScript

In your index.html file, link the JavaScript file before the closing body tag:

HTML

<body>

    <script src="index.js"></script>

</body>

Let's Break Down the JavaScript Code for the Heart Trail Animation

This JavaScript code is the heart (pun intended!) of our animation, responsible for capturing mouse movements and generating the hearts that follow your cursor. Here's a step-by-step explanation:

1. Grabbing the Body Element:

JavaScript
const bodyElement = document.querySelector("body")

This line uses document.querySelector to select the element with the tag name "body" from the HTML document. It stores this reference in a constant variable named bodyElement. This variable will be used later to interact with the body element.

2. Adding a Mouse Move Event Listener:

JavaScript
bodyElement.addEventListener('mousemove',(event)=>{
  // Code to execute on mouse movement
})

This line adds an event listener to the bodyElement. The specific event being listened for is "mousemove". This means whenever the mouse moves over the body (the entire webpage in this case), the code within the curly braces {} will be executed. The argument event provides details about the mouse movement, which we'll use next.

3. Capturing Mouse Position:

JavaScript
const xPosition = event.offsetX
const yPosition = event.offsetY

Inside the event listener function, we access properties of the event object to capture the mouse's current position relative to the body element. event.offsetX gives us the horizontal position (X-coordinate) and event.offsetY gives us the vertical position (Y-coordinate) of the mouse cursor within the viewport (the visible area of the webpage).

4. Creating a New Heart Element:

JavaScript
const spanElement = document.createElement('span')

This line uses document.createElement('span') to create a new HTML element of type <span>. This span element will be used to represent each heart in our animation.

5. Positioning the Heart:

JavaScript
spanElement.style.left=xPosition + 'px'
spanElement.style.top=yPosition + 'px'

Here, we're dynamically setting the position of the newly created spanElement (heart) using JavaScript. We access the style property of the spanElement and set the left and top styles using the captured mouse coordinates (xPosition and yPosition) converted to strings with "px" appended to indicate pixels. This ensures the heart appears exactly where the mouse cursor is.

6. Randomizing Heart Size:

JavaScript
const size = Math.random() *100
spanElement.style.width = size + 'px'
spanElement.style.height = size + 'px'

This section adds some flair by randomizing the size of each heart. We use Math.random() which generates a random number between 0 (inclusive) and 1 (exclusive). This value is then multiplied by 100 to get a range between 0 and 100. Finally, we set the width and height styles of the spanElement to this random value with "px" appended, creating hearts of varying sizes.

7. Applying the Animation Class:

JavaScript
spanElement.classList.add('animate')

 


Here, we link the CSS animation defined earlier (@keyframes animate) to the newly created heart element. We use classList.add('animate') to add the class name "animate" to the spanElement. This class name references the animation in the CSS, making the heart element follow the animation properties (movement, fading, color rotation) defined in the animate keyframes.

8. Adding the Heart to the Page:

JavaScript
bodyElement.appendChild(spanElement)

This line is crucial for displaying the heart on the webpage. We use bodyElement.appendChild(spanElement) to append the newly created spanElement (heart) as a child element to the bodyElement (the webpage body). This essentially adds the heart to the DOM (Document Object Model), making it visible on the screen.

9. Removing Faded Hearts:

JavaScript
setTimeout(()=>{
  spanElement.remove()
},5000)

This line ensures the hearts don't clutter the screen forever. We use setTimeout to schedule the removal of the spanElement (heart) after a delay of 5000 milliseconds (5 seconds). Inside the function passed to setTimeout, we use spanElement.remove() to remove the heart element from the DOM, making it disappear from the screen.

In Conclusion:

This JavaScript code effectively captures mouse movements, creates hearts with random sizes and positions, applies an animation


Get Full Code From Git

Tags:

Post a Comment

0 Comments