mouse animate

by imys

HTML

<div id="wrap"></div>

CSS

#wrap {
  height: 600px;
  width: 100%;
  background: #fff;
}
.target {
  position: fixed;
  opacity: 1;
  font-weight: bold;
  color: #ff3366;
  transition: all 1s ease-in-out;
}
.target.in {
  opacity: 0;
  transform: translateY(-200%);
}

JavaScript

let index = 1
$wrap = $('#wrap')
$wrap.click(e => {
	const top = e.clientY + 'px'
  const left = e.clientX + 'px'
  const $target = $('<div class="target"></div')
  $target.css({ top, left }).html(index++)
  $wrap.append($target)
  setTimeout(() => $target.addClass('in'))
}).on('transitionend', '.target', () => {
	const $this = $(this)
	$this.removeClass('in')
  setTimeout(() => $this.remove())
})