Изменение внешнего вида курсора при наведении
Сделать какой-нибудь простенький эффект при наведении можно с помощью самого курсора, меняя его внешний вид.
HTML разметка
Создадим меню, используя теги списков. Для кастомного курсора создадим div с классом cursor.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
<div class="cursor"></div>
</ul>
CSS стили
Поработаем над внешним видом меню.
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
cursor: none;
}
body{
background: #4e342e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
ul{
position: relative;
display: flex;
flex-direction: column;
}
ul li{
list-style: none; /*убираем черные маркеры*/
}
ul li a{
position: relative;
display: inline-block; /*отображать ссылки как строчно-блочный элемент */
margin: 10px 0; /*отступы между пунктами меню*/
font-size: 4em; /*размер шрифта*/
text-decoration: none; /*ссылки без подчеркивания*/
color: #ffd600; /*цвет ссылок*/
transition: 0.2s; /*плавные действия*/
}
Стилизация кастомного курсора
При наведении на меню курсор будет пятикратно увеличиваться в размерах.
ul .cursor{
position: fixed; /*фиксированное позиционирование*/
width: 20px; /*ширина курсора*/
height: 20px; /*высота курсора*/
border-radius: 50%; /*закругленность*/
background: #ffd600; /*цвет курсора*/
mix-blend-mode: difference; /*режим наложения*/
transform: translate(-50%,-50%); /*по центру*/
transition: 0.1s; /*плавные действия*/
pointer-events: none; /*запрет быть целью события мыши*/
}
ul li:hover ~ .cursor {
transform: translate(-50%,-50%) scale(5); /*масштабирование при наведении*/
}
JS код
Далее нужно заставить курсор двигаться за мышкой. Находим в документе элемент с классом cursor и заносим его в переменную cursor. С помощью метода addEventListener (слушатель событий) отлавливаем событие mousemove и запускаем функцию. Функция каждый раз фиксирует новые координаты мыши и вставляет их в стили курсора, действуя через переменную cursor.
<script type="text/javascript">
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
});
</script>
Посмотрите пример на CodePen
