Как сделать такой эффект для курсора?

Для создания интересного эффекта для курсора в JavaScript можно воспользоваться CSS и некоторыми свойствами DOM.

1. В первую очередь, создадим элемент, который будет служить нашим эффектом курсора. Мы можем использовать, например, div с классом "cursor-effect"

<div class="cursor-effect"></div>

2. Теперь добавим некоторые стили CSS для этого элемента, чтобы он выглядел, как мы хотим, например, круглым и с какой-то начальной анимацией:

.cursor-effect {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    z-index: 9999;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

3. Теперь перейдем к JavaScript, чтобы двигать наш эффект в соответствие с позицией курсора.
На первом этапе мы должны отслеживать перемещение курсора, чтобы изменять позицию нашего элемента. Мы используем события "mousemove" и "touchmove".

document.addEventListener('mousemove', moveCursor);
document.addEventListener('touchmove', moveCursor);

function moveCursor(event) {
    var cursorEffect = document.querySelector('.cursor-effect');
    cursorEffect.style.left = event.clientX + 'px';
    cursorEffect.style.top = event.clientY + 'px';
}

4. Наконец, мы можем добавить этот эффект к нашей странице:

window.onload = function() {
    var cursorEffect = document.createElement('div');
    cursorEffect.className = 'cursor-effect';
    document.body.appendChild(cursorEffect);
}

В результате, когда вы взглянете на вашу страницу, вы должны увидеть, что двигается эффект курсора, в соответствии с перемещением вашего реального курсора, и внешний вид будет таким, как мы определили с помощью CSS.

Надеюсь, это помогло вам понять, как создать интересный эффект для курсора при помощи JavaScript!