Эффект следования за курсором
Сделаем простой эффект следования декоративного элемента за курсором и добавим ему дополнительное поведение при определенном событии (в данном примере при наведении на ссылку)
Если читаете статью на компьютере, то можете заметить рядом с курсором небольшой кружок, который при наведении на ссылку меняет свой внешний вид
Этот декоративный элемент и будет результатом данной статьи ;)
Структура примера
Создадим стандартную структуру для примера
Добавим в конец <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&family=Roboto:wght@300;400&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
})
Данным способом можно делать различные декоративные элементы для курсора, менять их поведение и внешний вид от других возможных событий, добавлять им анимации и так далее
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!
Похожие записи
Выбор диапазона значений на основе плагина noUiSlider
В статье рассмотрим один из вариантов, как сделать выбор диапазона значений, который обычно используется в фильтрах интернет-магазинов
Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)
В данной статье рассмотрим вариант создания графиков на основе плагина Charts.js
