Как создать собственный анимированный курсор для сайта или ПК 🖱

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

Создание анимированного курсора для сайта 💻

Для замены стандартного курсора на сайте используются CSS и JavaScript. Вот пошаговая инструкция:

1. Отключите стандартный курсор в CSS:

   body { cursor: none; }

2. Создайте HTML-элемент для кастомного курсора:

3. Стилизуйте курсор с помощью CSS, приведенный ниже код создает простой круглый курсор:

   #custom-cursor { width: 20px; height: 20px; background-color: #4c51bf; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; }

4. Добавьте JavaScript для отслеживания движения мыши:

   document.addEventListener('mousemove', function(e) { document.getElementById('custom-cursor').style.left = e.pageX + 'px'; document.getElementById('custom-cursor').style.top = e.pageY + 'px'; });

Примеры анимаций курсора:

• Эффект отставания: несколько элементов, следующих за основным курсором с разной скоростью
• Метаморфоза: изменение формы курсора при наведении на разные элементы
• Интерактивный: курсор реагирует на клики и другие действия пользователя

Изменение курсора в операционной системе 💾

Для изменения курсора в Windows или macOS потребуются специальные файлы (.cur или .ani) и системные настройки:

1. Создание файла курсора: используйте программы вроде RealWorld Cursor Editor или Axialis CursorWorkshop
2. Установка в Windows: Панель управления → Мышь → Указатели
3. Настройка в macOS: Системные настройки → Доступность → Отображение → Курсор