Как сделать тепловой след от курсора

#javascript #jquery #css #jquery_ui #css_animation

Не могу понять, как сделать такой же тепловой след от курсора
тепловой след появляется на верхнем блоке
    

Ответы

Ответ 1

Немного если сократить код и нагрузку на браузер и выбрасывать за собой мусор, получится
вот так)



$('html').on('mousemove', function(e){
  var bubble = $('
');
  bubble.css({'left': e.clientX-50, 'top': e.clientY-50});
  $('body').append(bubble);
  setInterval(function(){bubble.remove()}, 1000)
});
.bubble{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: coral;
  box-shadow: 0 0 0 0 coral;
  animation: leave 1s ease forwards;
}
@keyframes leave{
  from{
    width: 100px;
    height: 100px;
  }
  to{
    width: 0px;
    height: 0px;
  }
}



Ответ 2

С положением думаю разберешься как до курсора подвинуть)
И нужно сетинтервалом удалять их а то будут апендиться бесконечно) ДОМ тоже чистить надо)
Надеюсь идея понятна)



$('html').on('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  var id = new Date();
  var sec = id.getSeconds();
  var min = id.getMinutes();
  var ms = id.getMilliseconds();
  var all = min+''+sec+''+ms;
  $('body').append('
');
  $('#'+all+'').css({'left': x, 'top': y});
});
.bubble{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: coral;
  box-shadow: 0 0 0 0 coral;
  animation: leave 1s ease forwards;
}
@keyframes leave{
  from{
    width: 100px;
    height: 100px;
  }
  to{
    width: 0px;
    height: 0px;
  }
}