Create Animated Hearts

4 min readMay 5, 2023

#Javascript #Html #Css #Animation

Creating animation is a great way to learn basic concepts of Html, Css and JavaScript. Animations can be used to highlight important information, guide users through a website, and create a unique and playful design. One popular animation is the heart animation, which is often used to add a touch of romance or playfulness to a website.

Creating heart animations using HTML, CSS, and JavaScript is a simple process that can be accomplished by anyone with a basic understanding of web development.
The heart animation can be customized to suit your needs, whether you want to create a subtle and elegant effect or a bold and playful animation.
By following the steps outlined in this tutorial, you will be able to create your own heart animation that will capture your visitors’ attention and add a unique touch to your website.

Creating Animation

First create a folder with Html, Css and JavaScript file named as index.html, style.css and script.js
Place all files in same folder.

After this, write code:

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="header-plugin"></div>
    <div class="bg_heart"></div>
<script src="script.js"></script>
</body>
</html>

CSS CODE

html,body{
    height:100%
  }
  
  .bg_heart {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden
   }
  
  .heart {
      position: absolute;
      top: -50%;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -m-transform: rotate(-45deg);
      transform: rotate(-45deg)
   }
  
  .heart:before {
      position: absolute;
      top: -50%;
      left: 0;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
  }
  
  .heart:after {
      position: absolute;
      top: 0;
      right: -50%;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
  }
  
  @-webkit-keyframes love {
    0%{top:110%}
  }
  @-moz-keyframes love {
    0%{top:110%}
  }
  @-ms-keyframes love {
    0%{top:110%}
  }
  @keyframes love {
    0%{top:110%}
  }

Explanation

html,body{
    height:100%
}

This sets the height of the HTML and body elements to 100%, which ensures that the background heart animations will fill the entire page.

.bg_heart {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

This creates a container for the heart animations, with a position of relative and a width and height of 100%. The overflow: hidden property ensures that any overflowing elements are hidden.

.heart {
    position: absolute;
    top: -50%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -m-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

This creates the heart shape by positioning an absolutely positioned element with a top value of -50% (to position it outside of the container), and rotating it by 45 degrees to create a diamond shape. The various vendor prefixes for the transform property ensure cross-browser compatibility.

.heart:before {
    position: absolute;
    top: -50%;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

.heart:after {
    position: absolute;
    top: 0;
    right: -50%;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

These pseudo-elements create the two halves of the heart shape. The :before element is positioned at the top left corner of the heart and has a border radius of 100%, while the :after element is positioned at the top right corner of the heart and also has a border radius of 100%.

@-webkit-keyframes love {
    0%{top:110%}
}
@-moz-keyframes love {
    0%{top:110%}
}
@-ms-keyframes love {
    0%{top:110%}
}
@keyframes love {
    0%{top:110%}
}

These are the keyframe animations for the heart movement. The top:110% property on the 0% keyframe sets the initial position of the heart animation, with the heart positioned below the container. The animation will then move the heart upwards until it reaches the top of the container. The various vendor prefixes ensure cross-browser compatibility.

JAVASCRIPT CODE

// Define a function that creates a heart element with random properties
function createHeart() {
    const heart = document.createElement('div');
    heart.classList.add('heart');
    heart.style.width = `${Math.floor(Math.random() * 65) + 10}px`;
    heart.style.height = heart.style.width;
    heart.style.left = `${Math.floor(Math.random() * 100) + 1}%`;
    heart.style.background = `rgba(255, ${Math.floor(Math.random() * 25) + 100 - 25}, ${Math.floor(Math.random() * 25) + 100}, 1)`;
    const duration = Math.floor(Math.random() * 5) + 5;
    heart.style.animation = `love ${duration}s ease`;
    return heart;
  }
  
  // Get the container element where the hearts will be added
  const container = document.querySelector('.bg_heart');
  
  // Define a function that removes hearts that have gone off screen
  function removeHearts() {
    const hearts = container.querySelectorAll('.heart');
    hearts.forEach((heart) => {
      const top = parseFloat(getComputedStyle(heart).getPropertyValue('top'));
      const width = parseFloat(getComputedStyle(heart).getPropertyValue('width'));
      if (top <= -100 || width >= 150) {
        heart.remove();
      }
    });
  }
  
  // Define a function that repeatedly adds hearts to the container
  function addHeart() {
    const heart1 = createHeart();
    const heart2 = createHeart();
    container.appendChild(heart1);
    container.appendChild(heart2);
    setTimeout(removeHearts, 1000);
  }
  
  // Start the animation loop
  const love = setInterval(addHeart, 500);

Explanation:

The createHeart() function creates a heart element using document.createElement(). It sets the element's width, height, left, background, and animation properties using random values.
The container variable gets the DOM element where the hearts will be added, using document.querySelector().
The removeHearts() function selects all .heart elements inside the container and removes any that have gone off screen.
The addHeart() function creates two heart elements using createHeart(), appends them to the container using appendChild(), and sets a timeout to call removeHearts() after one second.
The love interval repeatedly calls addHeart() every 500 milliseconds.

Feel free to follow me on Twitter, GitHub, and YouTube.🙂

Create Animated Hearts

Creating Animation

After this, write code:

CSS CODE

Explanation

JAVASCRIPT CODE

Sign up to discover human stories that deepen your understanding of the world.

Free

Membership

Written by Binary Beats

No responses yet