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

index.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

style.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

script.js
// 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)
  })