Source Code Of Animated Heart

Page Contents

Source Code Of Animated Heart Using HTML, CSS And JavaScript. Learn How To Make Animated Heart And Get Free Source Code.

Folder Structure

Resources

Codes

HTML

<!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">
    <title>Animated Heart | Cosas Learning</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <div class="container" id="container"></div>
    <!-- Script -->
    <script src="script.js"></script>
</body>   
</html>

CSS

/*-----------------  BASE  -----------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*-----------------  STYLING  -----------------*/
body{
    overflow: hidden;
}
.container{
    width: 100%;
    height: 100vh;
    background: url(images/background.png);
    background-position: center;
    background-size: cover;
}
span{
    position: absolute;
    filter: drop-shadow(0 0 1em rgba(0,0,0,0.5));
    pointer-events: none;
    animation: animHeart 1s linear infinite;
}
@keyframes animHeart {
    0%,100%{
        opacity: 0;
    }
    20%,80%{
        opacity: 1;
    }
}
span::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(images/heart.png);
    background-size: cover;
    animation: heart 1s linear infinite;
}
@keyframes heart {
    0%{
        transform: translate(0) rotate(0deg);
    }
    100%{
        transform: translate(20em) rotate(360deg);
    }
}

JavaScript

// Animated Heart 
document.addEventListener('mousemove', function(e){
    let container = document.getElementById('container');
    let heart = document.createElement('span');
    let x = e.offsetX;
    let y = e.offsetY;         
    heart.style.left = x+'px';
    heart.style.top = y+'px';
    
    let size = Math.random() * 80;
    heart.style.width = 20 + size+'px';
    heart.style.height = 20 + size+'px';

    let transformValue = Math.random() * 360;
    heart.style.transform = 'rotate('+transformValue+'deg)';
    
    container.appendChild(heart);

    setTimeout(function(){
      heart.remove();
    },1000)
  })