Я нашел небольшой скрипт замены курсора, который выглядит kewl и действительно хорошо работает на полноэкранных страницах. Я реализовал это на своем WordPress-сайте, но понял, что когда я нахожусь на странице, где мне приходится прокручиваться, мое изображение курсора не остается привязанным к тому месту, где находится мой фактический указатель. Прокрутка не обновляет позицию курсора до моего указателя мыши.
Я попытался добавить обработчик событий для onscroll, чтобы обновить позицию курсора при прокрутке, но, похоже, он ничего не делает. Я также попытался поместить свой курсор div в другой div и установить его позицию как липкую, но это просто сломало все это.
Вот две ссылки, где вы можете увидеть скрипт в действии:
krauss.fr / о (на этой странице работает нормально) krauss.fr / работает (на этой странице это не так)
А вот мой код
function setCurrentCursorProps() {
// Apply translation (set to actual cursor position)
cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
// Ensure correct rotation transition direction
while (Math.abs(lastCursorAngle - cursorAngle) > 180) {
if (cursorAngle > lastCursorAngle) {
cursorAngle -= 360;
} else if (cursorAngle < lastCursorAngle) {
cursorAngle += 360;
}
}
// Apply rotation
cursorImageEl.style.transform = `rotate(${cursorAngle - 90}deg)`;
}
function updateCursor() {
window.addEventListener('mousemove', event => {
currentCursorPos = { x: event.clientX, y: event.clientY };
});
window.addEventListener('onscroll', event => { //this is the code I added that doesn't work
currentCursorPos = { x: event.clientX, y: event.clientY };
});
// Interval for updating cursor-position
setInterval(setCurrentCursorProps, INTERVAL_POSITION);
// Interval for updating cursor-rotation
setInterval(() => {
const delt = {
x: lastCursorPos.x - currentCursorPos.x,
y: lastCursorPos.y - currentCursorPos.y };
if (Math.abs(delt.x) < 3 && Math.abs(delt.y) < 3) return;
cursorAngle = Math.atan2(delt.y, delt.x) * 180 / Math.PI;
setCurrentCursorProps();
lastCursorPos = currentCursorPos;
lastCursorAngle = cursorAngle;
}, INTERVAL_ROTATION);
}
return {
'initialize': () => {
cursorEl = document.querySelector('#cursor');
cursorImageEl = document.querySelector('#cursor > img');
updateCursor();
} };
}();
document.addEventListener('DOMContentLoaded', rotatingCursor.initialize);