Определить скорость курсора и установить высоту - PullRequest
Новая
       27

Определить скорость курсора и установить высоту

0 голосов
/ 01 июня 2019

Я настраиваю пользовательский курсор, где у меня есть это как вдохновение https://www.vincentsaisset.com. Я сейчас сделал анимацию, но мне нужна помощь, чтобы выяснить, как сжать большой круг в направлении, в котором я беру курсор.

Это то, что я сделал так: 

cursor = $(".cursor");

$(document).mousemove(function(event){
  var yCirclePosition = event.pageY - 30;
  var xCirclePosition = event.pageX - 30;
  var yDotPosition = event.pageY;
  var xDotPosition = event.pageX;

  $(".cursor .circle").css({
    "top" : yCirclePosition,
    "left" : xCirclePosition
  }) 

  $(".cursor .dot").css({
    "top" : yDotPosition,
    "left" : xDotPosition
  }) 

});
html {
  background-color: black;
}


.cursor {
	position: absolute;
	width: 60px;
	height: 60px;
	z-index: 9999;
}

.cursor .circle {
    width: 60px;
    height: 60px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    opacity: 0.5;
    pointer-events: none;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
    
.cursor .dot {
	    width: 6px;
	    height: 6px;
	    position: absolute;
	    border-radius: 50%;
	    background-color: white;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
	<div class="circle"></div>
	<div class="dot"></div>
</div>

)!

Я пытался и пытался выяснить, как я могу сжать большой круг и после этого вернуться к нормальной жизни. Но мне нужна помощь.

Надеюсь, ты сможешь мне помочь: (

...