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

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

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

Сделать какой-нибудь простенький эффект при наведении можно с помощью самого курсора, меняя его внешний вид.

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

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий

13 − девять =