JSFiddle - React, Tailwind, and code Playground

by Anton Kolesnikov

HTML

<!--http://2.bp.blogspot.com/-eZpvN6Wc2Yo/U62DlEDwmlI/AAAAAAAAFo4/dB0-Ok2QefM/s1600/Kcnq9Mdcq.png-->

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;
}

JavaScript

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

}

generateHearts(10);

animateHearts(2);