Сегодня будем делать курсор на сайт с тянущейся за ним картинкой или иконкой. Можно также вместо картинки разместить .gif анимацию. При этом сам курсор мы убирать не будем. То есть это будет картинка, немного сбоку от курсора, которая тянется за его движением.
Конечный результат можно посмотреть по ссылке ниже.
Что нам понадобится, чтобы сделать курсор с изображением
Чтобы реализовать задуманное нам понадобится:
- немного html-разметки;
- сама картинка или иконка, которую мы хотим использовать рядом с курсором;
- css-стили;
- и немного javascript кода (он будет выполнять основную работу).
Для удобства буду показывать всё в одном файле. Но в реальном проекте, конечно же, лучше разделить разметку, стили и javascript код.
Создаем начальную разметку страницы
На этом шаге я создам базовую разметку страницы с неким контентом для наглядности.
Кроме базовой разметки страницы у нас будет пустой div с классом follow-cursor. Именно он и будет отвечать за нашу картинку, которую мы привязываем к курсору. Если ваша страница уже готова, то по сути вам нужен только этот div.
Итак, разметка моей страницы будет следующей:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cursor with image</title>
</head>
<body>
<section class="section">
<div class="container">
<h2 class="h2">Cursor with image</h2>
<div>
<div class="image"><a href=""><img src="https://picsum.photos/200/200?random=1" alt=""/></a></div>
<div class="image"><a href=""><img src="https://picsum.photos/200/200?random=2" alt=""/></a></div>
<div class="image"><a href=""><img src="https://picsum.photos/200/200?random=3" alt=""/></a></div>
</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> <!-- элемент, который следует за курсором -->
</body>
</html>
Теперь напишем немного стилей для основной разметки, чтобы страница выглядела более или менее красиво.
body {
font-family: 'Roboto', sans-serif;
background: #fff;
color: #23202a;
position: relative;
}
.container {
max-width: 1140px;
padding: 0 16px;
margin: 0 auto;
}
.container > div{
display: flex;
justify-content: space-around;
}
.section {
text-align: center;
padding: 64px 0;
}
.h2 {
font-size: 48px;
font-weight: 700;
margin-bottom: 32px;
}
.image {
margin-bottom: 32px;
}
.text {
font-size: 18px;
max-width: 512px;
margin: 0 auto;
}
На данном этапе получим вот такую страницу.
Находим картинку и стилизуем курсор
Теперь нужно найти картинку или гиф анимацию для курсора. Для примера буду использовать gif. Самое главное, что нужно помнить – ищите анимацию или картинку с прозрачным фоном.
После того, как вы нашли вашу картинку загрузите ее на сайт. Я в примере загрузила мою гифку в корень. Если будете грузить в другое место, то нужно будет скорректировать url до картинки.
Давайте теперь зададим стили именно для картинки курсора.
.follow-cursor {
display: block;
width: 60px;
height: 60px;
background-image: url("cursor1.gif");
background-repeat: no-repeat;
background-size: contain;
border: 1px solid transparent;
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;
}
/* Скрываем картику курсора при ширине браузера меньше 992px */
@media (max-width: 991.98px) {
.follow-cursor {
display: none;
}
}
После задания этих стилей пока что ничего чудесного мы не увидим, кроме появившейся картинки курсора на экране. Это нормально, всё волшебство будет делать javascript, который мы напишем в следующем шаге.
Добавляем скрипт для картинки, следующей за курсором
Добавим javascript код, который даст нам нужный результат.
<script>
document.addEventListener('DOMContentLoaded', () => { // Вызываем когда страница загружена
const goWithCursor = () => { // объявляем функцию followCursor
const el = document.querySelector('.follow-cursor') // находим картику, следующую за курсором
window.addEventListener('mousemove', e => { // EventListener вызываем, когда мышь движется
const target = e.target // определяем, где находится курсор
if (!target) return
el.style.left = e.pageX + 'px' // задаём элементу позиционирование слева
el.style.top = e.pageY + 'px' // задаём элементу позиционирование сверху
})
}
goWithCursor() // вызываем функцию goWithCursor
})
</script>
Как видите, код не большой. Он весь прокомментирован, так что всё должно быть понятно.
Если в двух словах, то мы объявляем функцию goWithCursor, которая ловит событие движения мыши, находит нашу картинку для курсора и задает ей нужную позицию. В итоге получаем картинку или гифку, которая следует за курсором.
Скрипт и стили вы можете модифицировать под ваши нужды. Например, можно менять стиль картинки при наведении курсора на ссылки. И так далее.
Надеюсь урок был вам полезен. Всем удачи.
