В этом уроке мы рассмотрим, как превратить стандартный указатель мыши в причудливое эмодзи, которое меняет стиль при нажатии.
Я опубликую полный видеоурок на своем канале YouTube, и вы сможете посмотреть его там.
С этими словами, давайте приступим к кодированию!
Что мы будем создавать
Начните с создания этих трех файлов: index.html, styles.css и script.js.
Структура HTML
Создайте стандартный код HTML-шаблона.
<!DOCTYPE html>
<html>
<head>
<title>Custom Mouse Pointer</title>
</head>
<body></body>
</html>
Затем в теге <link> нашего HTML-файла импортируем styles.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body></body>
</html>
Импортируйте файл JavaScript, установив src тега <script> внизу нашего HTML-файла на наш файл script.js.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Наконец, создайте div с классом pointer. Этот элемент будет использоваться вместо курсора по умолчанию. Поскольку это html-элемент, мы можем применить к нему множество стилей.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body>
<div class="pointer"></div>
<script src="script.js"></script>
</body>
</html>
Вот и все, что нужно сделать с HTML-файлом! Открыв файл index.html в браузере, вы получите пустую страницу.
Стилизация нашего HTML
Сначала мы установим фон нашей веб-страницы в светло-фиолетовый цвет.
body {
background: #8499ff;
}
Установим высоту и ширину веб-страницы на максимальную высоту и ширину устройства, которое просматривает страницу.
body {
...
height: 100vh;
width: 100vw;
}
Затем, установив свойство overflow в none, мы предотвратим вертикальную и горизонтальную прокрутку.
body {
...
overflow: hidden;
}
Наконец, мы спрячем указатель.
body {
...
cursor: none;
}
Это должно быть сделано для body:
body {
background: #8499ff;
height: 100vh;
width: 100vw;
overflow: hidden;
cursor: none;
}
Теперь мы собираемся стилизовать указатель. Мы будем стилизовать не непосредственно указатель, а псевдокласс ::after.
Псевдокласс ::after выбирает содержимое, которое идет после выбранного элемента, позволяя вам вставить текст после определенного тега, что мы и будем делать в этом уроке.
.pointer::after {
content: "🤩";
font-size: 40px;
}
Мы установили свойство content в коде выше на эмодзи (🤩). Этот эмодзи будет нашим значком курсора по умолчанию. Затем размер увеличивается до 40px, чтобы сделать его немного больше.
Мы меняем эмодзи по умолчанию каждый раз, когда мышь нажимает на (😜). Для этого создается класс pointer-clicked. Этот класс будет присвоен указателю в JavaScript.
.pointer-clicked::after {
content: '😜';
}
Добавление функциональности с помощью JavaScript
Сначала выберите указатель, который мы создали в HTML, с помощью метода document.querySelector().
const pointer = document.querySelector(".pointer");
Мы должны прослушать эти два события мыши:
- mousemove: Когда указатель мыши перемещается
- mousedown: Когда указатель мыши нажимается/нажимается вниз.
window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
Создадим функции обратного вызова для этих слушателей событий.
const onPointerMove = (e) => {
// on pointer move
}
const onMouseClick = () => {
// on mouse click
}
Когда фактический указатель перемещается, мы хотим получить его позицию и передать ее элементу указателя, который мы создали в HTML.
const onPointerMove = (e) => {
const mouseY = e.clientY;
const mouseX = e.clientX;
pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
Параметр clientY возвращает вертикальную координату указателя относительно области просмотра. Свойство clientX, с другой стороны, возвращает горизонтальную координату.
В строке pointer.style.transform мы изменяем местоположение пользовательского указателя, присваивая ему координаты реального курсора. Умный ход! 😊
Когда мышь щелкает, мы добавляем новый класс pointer-clicked. А затем удаляем этот вновь созданный класс через 150 миллисекунд в функции setTimeout, возвращая указатель в состояние по умолчанию.
const onMouseClick = () => {
pointer.classList.add('pointer-clicked')
setTimeout(() => {
pointer.classList.remove('pointer-clicked')
}, 150)
}
В конце всего, в файле script.js должно быть следующее:
const pointer = document.querySelector('.pointer');
const onPointerMove = (e) => {
const mouseY = e.clientY;
const mouseX = e.clientX;
pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
const onMouseClick = () => {
pointer.classList.add('pointer-clicked')
setTimeout(() => {
pointer.classList.remove('pointer-clicked')
}, 150)
}
window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
Теперь, открыв index.html в браузере, вы должны увидеть это!
Код доступен на GitHub
Заключение
Вот и все для этой статьи.
Если вы нашли эту статью полезной, следите за мной в Twitter и подписывайтесь на мою еженедельную рассылку материалов по веб-разработке и разработке программного обеспечения.