Custom cursor для своего сайта на html css js своими силами

По окончанию у нас должно получится что-то подобное.

В данном примере сам курсор не подвергается изменениям. На странице создаются html элементы, которые следуют за курсором. Таким образом и достигается нужный нам эффект.

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

Несмотря на то, что в моем примере сам курсор не подвергается стилизации я рассмотрю базовые способы изменения курсора при помощи css.

Изменение курсора с помощью css

Для курсора предусмотрена возможность изменять изменять его с помощью стандартных свойств css.

Изменяем изображение курсора

Для начала нам понадобится создать само изображение или взять уже готовое. Создать его можно в Figma или других аналогичных программах. При этом стоит знать, что размер стандартного курсора 16 на 16 пикселей. Готовое изображение помещаем в папку image, которая размещается в корне проекта.

Заменить изображение на свое можно вставив код в css файл.

body{
  cursor: url(../image/Cursor.png), auto;
}

Изменение курсора при наведении

Если мы наводим курсор на кнопку или ссылку, то стрелка меняется на руку с указательным пальцем, что является пользователю подсказкой о кликабельности элемента.

Все это достигается посредством свойства cursor. Синтаксис у этого свойства, следующий:

 button:hover{
  cursor:pointer;
}

Основные и наиболее часто используемые значения свойства cursor:

Значение	Изображение	Указывает на
pointer		Элемент кликабельный
help		Подсказка
zoom-in		Можно увеличить
zoom-out		Можно уменьшить
grab		Перетянуть элемент
grabbing		Перетянуть элемент
not-allowed		Запрещает

Создание эффекта для нашего custom cursor

Перед тем, как применить стили к курсору стоит помнить, что эффекты, примененные непосредственно к курсору, будут перетягивать на себя внимание и отвлекать от действительно важного контента. Это может сказаться на конверсии сайта. Нужно понимать зачем это делается и уместно ли в конкретном случае.

Наша задача сделать три элемента, которые будут следовать за курсором с некоторой задержкой.

Основной элемент будет иметь радиальный градиент и не иметь никакой обводки. Остальные два элемента будут с прозрачным фоном, но будут иметь окантовку.

Теперь создадим в html коде эти три элемента, чтоб они физически присутствовали на странице. Для этого в теге body создадим три тега div.

Можно создать всего один элемент в html коде, а остальные два создать с помощью псевдоклассов after и before. Всегда есть несколько способов реализовать задуманное, которые ничем не хуже.

Html код

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

<div class="follow-cursor follow-cursor_2"></div>

<div class="follow-cursor follow-cursor_3"></div>

Обратите внимание, что второй и третий элементы имеют дополнительные классы, которые позволят в файле css обратится к этим элементам по отдельности.

Теперь перейдем к стилизации

/* Основные стили */

.follow-cursor{

  border-radius: 50%;

  width: 40px;

  height: 40px;

  width: 80px;

  height: 80px;

  position: absolute;

  transition: 0.3s;

  transform: translateY(-50%) translateX(-50%);

  z-index: 999;

  pointer-events: none;

  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.23) 0%, rgba(146, 157, 252, 0.08) 100%);

  filter: blur(0.699999988079071px);

}

/* Общие стили для второго и третьего элементов */

.follow-cursor_2, .follow-cursor_3{

  background: none;

  border: 0.1px solid rgba(100, 97, 248, 0.3);

}

/* Задержка у 2-го элемена */

.follow-cursor_2{

  transition: 0.4s;

}

/* Задержка у 3-го элемена */

.follow-cursor_3{

  transition: 0.5s;

}

/* Активный класс для кружка при наведении на ссылку */

.follow-cursor_active {

  height: 128px;

  width: 128px;

  border-width: 2px;

  border: none;

}

/* Скрываем элементы на мобильный устройствах */

._tadth .follow-cursor, ._tadth .follow-cursor_2, ._tadth .follow-cursor_3{

  display: none;
}

Тут стоит прояснить ключевые моменты.

Общие стили для элементов курсора

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

Стили для второго и третьего элементов

Долее мы стилизуем второй и третий элементе. Здесь мы отменяем свойства фонового цвета и прописываем стили обводки.

Для второго и третьего элементов по отдельности устанавливаем время задержки. Это мы делаем с помощью свойства transition. Для каждого элемента значение этого свойства будет свое, благодаря чему достигается нужный эффект анимации. Именно для этого им были добавлены уникальные css классы.

Стили состояния курсоров при наведении

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

Отключаем эффект на мобильных

На мобильных устройствах эти элементы на странице не нужны. Поэтому мы их отключаем. В данном случае это реализовано благодаря тому, что в проекте находится скрипт, который определяет на каком типе устройства просматривается страница. Пример такого скрипта выложу здесь. Если это устройство с тачскрин экраном, то тегу dody будет присвоен класс _tadth. Используя этот класс можно обратиться ко всем нашим элементам и отключить их с помощью свойства display: none;.

Отключить эффект на устройствах с тачскрином можно и штатными средствами css. Для этого нужно заменить последние строки кода на вот эти:

/* Скрываем элементы на мобильный устройствах */

@media (pointer: coarse) {

  .follow-cursor, .follow-cursor_2, .follow-cursor_3{

    display: none;

  }

}

Подключаем JavaScript

В JavaScript файле проекта прописываем следующий код. Если такого файла нет, то его стоит создать и подключить в html. Но, сейчас не об этом.

document.addEventListener('DOMContentLoaded', () => {

  const followCursor = () => { // объявляем функцию followCursor

    const el = document.querySelectorAll('.follow-cursor') // ищем элемент, который будет следовать за курсором

    window.addEventListener('mousemove', e => { // при движении курсора

      const target = e.target // определяем, где находится курсор

      if (!target) return

      el.forEach(function(element) {

        if (target.closest('a') || target.closest('button')) { // если курсор наведён на ссылку

          element.classList.add('follow-cursor_active') // элементу добавляем активный класс

        } else { // иначе

          element.classList.remove('follow-cursor_active') // удаляем активный класс

        }

        element.style.left = e.pageX + 'px' // задаём элементу позиционирование слева

        element.style.top = e.pageY + 'px' // задаём элементу позиционирование сверху

      });

    })

  }

  followCursor() // вызываем функцию followCursor

Здесь стоит обратить внимание на пару ключевых моментов.

Обратите внимание, что в строке const el = document.querySelectorAll(‘.follow-cursor’) прописан класс, который является общим для всех элементов. Он обязательно должен соответствовать тому, который у элементов на странице.  

Так же стоит обратить внимание на строку (target.closest(‘a’) || target.closest(‘button’)). В кавычках указываются названия тегов, при наведении на которые будет происходить увеличение элементов. В данном проекте одна часть кнопок реализована с помощью тега <button>, а другая часть реализована тегом <a>.

При необходимости можно оставить в строке только один элемент. Тогда ее нужно будет изменить. Например так:

(target.closest('button'))

Заключение

Это далеко не единственный вариант создания эффектов. Их может быть множество. Так же, как и способов реализации. Главное, понимать для чего они нужны в проекте и не применять эти эффекты, где они совершенно не нужны.