more chaotic upward movement

Question

I have a heart movement on my page starting from the bottom of the page. Each randomly generates the size and speed of movement.

How can I make them, instead of appearing at the bottom of the page, appear when you click on the specified place, and move not evenly, but more chaotically and disappear before reaching the end?

var love = setInterval(function() {
    var r_num = Math.floor(Math.random() * 40) + 1;
    var r_size = Math.floor(Math.random() * 30) + 10;
    var r_left = Math.floor(Math.random() * 100) + 1;
    var r_time = Math.floor(Math.random() * 5) + 5;

    $('.bg_heart').append("<div class='heart' style='width:" + r_size + "px;height:" + r_size + "px;left:" + r_left + "%;background:#ff94a7;-webkit-animation:love " + r_time + "s ease;-moz-animation:love " + r_time + "s ease;-ms-animation:love " + r_time + "s ease;animation:love " + r_time + "s ease'></div>");

    $('.bg_heart').append("<div class='heart' style='width:" + (r_size - 10) + "px;height:" + (r_size - 10) + "px;left:" + (r_left + r_num) + "%;background:#ff94a7;-webkit-animation:love " + (r_time + 5) + "s ease;-moz-animation:love " + (r_time + 5) + "s ease;-ms-animation:love " + (r_time + 5) + "s ease;animation:love " + (r_time + 5) + "s ease'></div>");

    $('.heart').each(function() {
        var top = $(this).css("top").replace(/[^-\d\.]/g, '');
        var width = $(this).css("width").replace(/[^-\d\.]/g, '');
        if (top <= -100 || width >= 150) {
            $(this).detach();
        }
    });
}, 500);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="header-plugin"></div>

<div class="bg_heart"></div>

Answer 1

To fly more chaotically use setInterval. You can also change the speed to whatever you need.

var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));

const duration = 3000;
const speed = 0.5;
const cursorXOffset = 0;
const cursorYOffset = -5;

var hearts = [];
    
function generateHeart(x, y, xBound, xStart, scale)
{
  var heart = document.createElement("DIV");
  heart.setAttribute('class', 'heart');
  brd.appendChild(heart);
  heart.time = duration;
  heart.x = x;
  heart.y = y;
  heart.bound = xBound;
  heart.direction = xStart;
  heart.style.left = heart.x + "px";
  heart.style.top = heart.y + "px";
  heart.scale = scale;
  heart.style.transform = "scale(" + scale + "," + scale + ")";
  if(hearts == null)
    hearts = [];
  hearts.push(heart);
  return heart;
}

var down = false;
var event = null;

document.onmousedown = function(e) {
  down = true;
  event = e;
}

document.onmouseup = function(e) {
  down = false;
}

document.onmousemove = function(e) {
  event = e;
}

document.ontouchstart = function(e) {
  down = true;
  event = e.touches[0];
}

document.ontouchend = function(e) {
  down = false;
}

document.ontouchmove = function(e) {
  event = e.touches[0];
}

var before = Date.now();
var id = setInterval(frame, 5);
var gr = setInterval(check, 100);

function frame()
{
  var current = Date.now();
  var deltaTime = current - before;
  before = current;
  for(i in hearts)
  {
    var heart = hearts[i];
    heart.time -= deltaTime;
    if(heart.time > 0)
    {
      heart.y -= speed;
      heart.style.top = heart.y + "px";
      heart.style.left = heart.x + heart.direction * heart.bound * Math.sin(heart.y * heart.scale / 30) / heart.y * 100 + "px";
    }
    else
    {
      heart.parentNode.removeChild(heart);
      hearts.splice(i, 1);
    }
  }
}

function check()
{
  if(down)
  {
    var start = 1 - Math.round(Math.random()) * 2;
    var scale = Math.random() * Math.random() * 0.8 + 0.2;
    var bound = 30 + Math.random() * 20;
    generateHeart(event.pageX - brd.offsetLeft + cursorXOffset, event.pageY - brd.offsetTop + cursorYOffset, bound, start, scale);
  }
}

html,body{
  height:100%
}

@keyframes heartfade {
  0% {
    opacity : 1;
  }
  50% {
    opacity : 0;
  }
}
.heart {
  z-index : 999;
  animation : heartfade 6s linear;
  position : absolute; 
}
.heart:before,
.heart:after {
  content : "";
  background-color : #ff94a7;
  position : absolute;
  height : 30px;
  width : 45px;
  border-radius : 15px 0px 0px 15px;
}

.heart:before {
  transform : rotate(45deg);
}

.heart:after {
  left : 10.5px;
  transform : rotate(135deg);
}