Эффект следования за курсором

Сделаем простой эффект следования декоративного элемента за курсором и добавим ему дополнительное поведение при определенном событии (в данном примере при наведении на ссылку)

1

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

Этот декоративный элемент и будет результатом данной статьи ;)



Прежде чем начать, хотел бы обратить внимание, что у блога есть телеграм канал https://t.me/frontips, где можно узнавать о выходе новых статей и со временем будет появляться больше интересной и полезной информации.

Поддержите развитие блога и канала подпиской!

А теперь перейдём к теме статьи ;) Приятного чтения!



Структура примера

Создадим стандартную структуру для примера

Добавим в конец <body> элемент <div class="follow-cursor"></div>, который будет следовать за курсором

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Follow you</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&amp;family=Roboto:wght@300;400&amp;display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h2 class="h2">Section Title</h2>
        <div class="image"><a href=""><img src="https://picsum.photos/512/300" alt=""/></a></div>
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quidem, iure. Incidunt nihil <a href="">porro</a>, vel, libero quibusdam mollitia blanditiis, ab corrupti fugiat similique obcaecati quaerat accusantium eum nam aperiam! Ratione.</p>
      </div>
    </section>
    <div class="follow-cursor"></div> <!-- элемент, который следует за курсором -->
    <script src="js/main.js"></script>
  </body>
</html>


CSS

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

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

body {
  font-family: 'Roboto', sans-serif;
  background: #fff;
  color: #23202a;
  position: relative;
}
.container {
  max-width: 1140px;
  padding: 0 16px;
  margin: 0 auto;
}
.section {
  text-align: center;
  padding: 64px 0;
}
.h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 32px;
}
.image {
  margin-bottom: 32px;
}
.image a {
  border-radius: 8px;
  max-width: 512px;
  width: 100%;
  height: 300px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}
.text {
  font-size: 18px;
  max-width: 512px;
  margin: 0 auto;
}

/* Начальные стили для элемента, который будет следовать за курсором, в нашем случае небольшой кружок */
.follow-cursor {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #0d6efd;
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%); /* центрируем кружок */
  position: absolute; /* задаём абсолютное позиционирование, чтобы элемент не влиял на остальные элементы и его можно было бы позиционировать следом за курсором */
  z-index: 999; /* чтобы элемент был над остальными элементами */
  pointer-events: none; /* чтобы сквозь элемент можно было взаимодействовать с элементами, находящимися под ним */
  transition: width 0.64s, height 0.64s, border-radius 0.64s, background 0.64s;
}

/* Активный класс для кружка при наведении на ссылку */
.follow-cursor_active {
  height: 128px;
  width: 128px;
  border-width: 2px;
  background: rgba(13,110,253,0.32);
}

/* Скрываем декоративный элемент при ширине браузера меньше 992px */
@media (max-width: 991.98px) {
  .follow-cursor {
    display: none;
  }
}



Пишем JavaScript

Логика следующая - при движении курсора, добавляем сопровождающему элементу inline-стили позиционирования left и top в зависимости от положения курсора. При этом если курсор наведён на ссылку, то элементу добавляем активный класс, иначе удаляем

Код с комментариями

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

  const followCursor = () => { // объявляем функцию followCursor
    const el = document.querySelector('.follow-cursor') // ищем элемент, который будет следовать за курсором

    window.addEventListener('mousemove', e => { // при движении курсора
      const target = e.target // определяем, где находится курсор
      if (!target) return

      if (target.closest('a')) { // если курсор наведён на ссылку
        el.classList.add('follow-cursor_active') // элементу добавляем активный класс
      } else { // иначе
        el.classList.remove('follow-cursor_active') // удаляем активный класс
      }

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

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

})


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

Буду рад, если статья оказалась полезной

Спасибо за ваше внимание и уделённое время!



Друзья, стараюсь для вас, поддержите проект!

Подписывайтесь, впереди много всего интересного и полезного ;)

Telegram - https://t.me/frontips

VK - https://vk.com/frontips