Гайд Анимированный курсор на jQuery

[HORMAN]

Здарова, шайтан, гайд по анимированному курсору на месте.

Пожалуйста, авторизуйтесь для просмотра ссылки.

HTML:

  <!-- dot - сам курсор,  cursor - окружность -->
    <div class="dot"></div>
    <div class="cursor"></div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="index.js"></script>

CSS:

*{
    margin: 0;
    padding: 0;
    user-select: none;
    cursor: none;
}

body{
    background-color: rgb(44, 44, 44);
}

.dot{
    width: 4px;
    height: 4px;
    position: fixed;
    background-color: #ffffff;
    border-radius: 50%;
    margin: -2px 0 0 -2px;
    z-index: 9999;
    pointer-events: none;
}

.cursor{
    width: 40px;
    height: 40px;
    background-color: rgb(0, 0, 0, 0);
    border: 1px solid #ffffff;
    border-radius: 50%;
    position: fixed;
    margin: -20px 0 0 -20px;
    z-index: 9999;
    pointer-events: none;
}

JS:

$(document).ready(function(){
    let $cursorX = 0, $cursorY = 0, $top = 0, $left = 0, $leftd = 0, $topd = 0;
// получаем координаты курсора
    $(document).mousemove(e => {
            $cursorX = e.clientX;
            $cursorY = e.clientY;
    });
// точка, находится ровно там, где и курсор
    setInterval(() =>{
        $leftd += ($cursorX - $leftd);
        $topd += ($cursorY - $topd);
        $('.dot').css({left: $leftd + 'px', top: $topd + 'px'});
    }, 1);
// окружность доходит до курсора, но замедленно
    setInterval(() =>{
        $left += ($cursorX - $left) / 10;
        $top += ($cursorY - $top) / 10;
        $('.cursor').css({left: $left + 'px', top: $top + 'px'});
    }, 6);

});

 

[Nordia]

ss?

 

[HORMAN]

ss?

ну, ладно, щас загружу

 

[HORMAN]

ss?

Поставил демку, чекай, ну да, можно было и отредактировать прошлое сообщение, но в пизду, правильно?