JSFiddle - React, Tailwind, and code Playground

by Anton Kolesnikov

HTML

<!--http://2.bp.blogspot.com/-eZpvN6Wc2Yo/U62DlEDwmlI/AAAAAAAAFo4/dB0-Ok2QefM/s1600/Kcnq9Mdcq.png-->
<div class="text">
    Любимой жене
    <br />
    от любимого мужа! ;-)
</div>

CSS

body {
    position:relative;
    overflow:hidden;
}
.heart {
    position:absolute;
    opacity: 0.4;
    background-image:url('http://2.bp.blogspot.com/-eZpvN6Wc2Yo/U62DlEDwmlI/AAAAAAAAFo4/dB0-Ok2QefM/s1600/Kcnq9Mdcq.png');
    background-size: contain;
    background-repeat:no-repeat;
}
.text {
    color: #EE1C24;
    text-align: center;
    display: block;
    margin: 100px auto;
    font-size: 68px;
    text-shadow: 2px 2px 0 #fff, 4px 4px 2px #EE1C24;
}

JavaScript

function generateHearts(count) {
    for (var i = 0; i < count; i++) {
        var heart = $("<div class='heart'></div>"); // Создаем блок с сердцем
        var random = Math.random();
        var size = (random * 40) + 10; // Размер сердца
        var left = Math.random() * $(window).innerWidth(); // Стартовое положение по горизонтали
        var opacity = "0." + Math.round(random * 5);
        
        heart.css({
            width: size,
            height: size,
            left: left,
            top: -50,
            opacity: opacity
        });
        
        heart.data('position-top',-50); // Выводим сердце за область экрана. Максимальный размер сердца 50px
        heart.data('position-left',left); // Ставим сердце согласно left
        
        heart.data('vector-x', (Math.random() * 7) - 5);
        heart.data('vector-y', (Math.random() * 1) + 2);
        
        $('body').append(heart); // Вставляем серде в body
        console.log(heart.data('vector-x'))
    }
}

function animateHearts(newHeartsCount) {
    setInterval(function () {
        
        $('.heart').each(function () {
            var posTop = $(this).data('position-top') + $(this).data('vector-y') ; // Корректируем позицию на вектор
            var posLeft = $(this).data('position-left') + $(this).data('vector-x');
            $(this).data('position-top', posTop);
            $(this).data('position-left', posLeft);
 

            $(this).css({
                top: posTop,
                left: posLeft
            });
            
            if (posTop > $(window).innerHeight() || posLeft > $(window).innerWidth()+50 || posLeft < -50) {
                $(this).detach();
            }
        });
        generateHearts(newHeartsCount);
    }, 50);

}
animateHearts(1);