Как создать пользовательский курсор с анимацией на HTML, CSS & JavaScript | Custom Cursor JavaScript

Всем привет!

В этом видео вы узнаете как сделать такой вот пользовательский курсор, используя HTML, CSS и JavaScript шаг за шагом.

Если вам понравится данное видео, пожалуйста не забудьте поставить лайк и написать комментарий.

Это способствует развитию канала.

Спасибо и приятного просмотра!

Итак, приступим к созданию пользовательского курсора.

У нас есть файл index.html, style.css, стили подключены, также подключены шрифты и добавлены простые обнуляющие стили.

Теперь давайте внутри в баги создадим div с классом курсор и после него создадим заголовок первого типа и туда укажем content.custom.cursor.

И давайте откроем страницу в браузере с помощью Live Server и посмотрим, что у нас добавилось.

Итак, как мы видим, есть наш заголовок.

Давайте теперь свернем браузер и Visual Studio Code, чтобы наглядно было видно, что меняется на странице.

Перейдем в стиле.

В стилях обратимся к селектору тега Body.

Для него укажем минимальная высота будет 100px.

Добавим Background Color и сделаем его черным.

Также сделаем размещение элемента по центру.

Укажем Display Flex.

Justify Content Center это выравнивание по горизонтали.

И Align Items Center выравнивание по вертикали.

Как мы видим элемент у нас размещается по центру.

Теперь давайте обратимся к заголовку первого типа.

Для него укажем цвет белый.

укажем font-size также увеличим размер шрифта на 80 пикселей как мы видим есть у нас вот заголовок посредине теперь давайте создадим стиле для самого курсора обратимся к div с классом курсор у него укажем position absolute ширина будет у него 2rem высота также будет 2rem добавим border-radius на 50 процентов скругления со всех сторон

углом на 50%, чтобы элемент у нас был круглый.

Также добавим Background Color.

Давайте перейдем на сайт Color Resources.

И здесь выберем Hex Generator.

И сгенерируем, допустим, вот такой вот цвет.

Выберем отсюда цветовой код.

И сюда его давайте вставим.

Как мы видим, вот элемент здесь посредине у нас уже появился.

Давайте теперь его немного еще анимируем.

Для курсора здесь, для этого класса, добавим свойство Animation.

Дадим название анимации.

Назовем ее Move, движение.

Одна секунда укажем.

Также Infinity, чтобы бесконечная была.

И Alternate.

Теперь давайте здесь ниже укажем.

правило keyframes и отсюда скопируем название move и вставим его сюда вместо identifier чтобы подключить эту анимацию для анимации укажем первый ключевой момент 0% и добавим свойство box-shadow для box-shadow укажем смещение по горизонтали 0 по вертикали 0 10 пикселей будет размытие и 5 пикселей будет распространение и цвет выберем такой же цветовой код вставим его сюда

скопируем этот элемент ставим ниже здесь выберем ключевой момент 2 на сто процентов и здесь нам нужно указать вместо 10 20 размытие и вместо распространения 5 пикселей укажем 10 пикселей как мы видим есть такая вот анимация для нашего курсора так теперь давайте сделаем так чтобы этот курсор у нас

мог двигаться по странице это мы будем делать с помощью java script и так переходим в index.html и здесь ниже создадим тег script и внутри него давайте создадим переменную дадим название ей курсор укажем document и здесь выберем query selector получим элемент по селектору и селектор у нас идет

класса, курсор называется.

Добавляем точку и вставляем сюда курсор.

Создали эту переменную и получили этот элемент по этому Select.

Затем указываем также Document и добавим обработчик событий AddEventListener.

Затем у нас открываем дужки и в скобках здесь нам нужно указать тип события.

Тип события у нас будет называться

mouse move движение мыши здесь через запятую нам нужно добавить функцию функции дадим название простое просто укажем букву и сокращенно от event события здесь откроем блок объявления и внутри нам нужно указать характеристики события и характеристики у нас будут следующие мы здесь указываем нашу переменную курсор

указываем style и указываем left чтобы у нас движение было в левую и в правую сторону здесь ставим равно обращаемся к функции и указываем page x то есть будет идти движение по горизонтальной оси указываем плюс и пиксель теперь давайте перейдем на страницу и видим расширим видим у нас вот мы

Курсором движем.

И вот этот курсор наш, пользовательский, он также за ним перемещается.

Но вверх-вниз движения нет.

Только вправо-влево.

Давайте также еще добавим движение вверх-вниз.

Переходим обратно в индекс.html, в скрипт.

Копируем эту вот строку.

Вставляем ниже.

И здесь нам нужно заменить.

Вместо left указываем top.

И здесь меняем.

на пейдж игрок то есть будет по вертикали переходим на нашу страницу и теперь у нас курсор перемещается полностью по всей странице так теперь давайте вот этот курсор дефолтный спрячем переходим в стиле стилях здесь нам нужно перейти в баги здесь укажем курсор нам

Итак, видим, курсор дефолтный исчез.

И только этим курсором пользовательским мы можем делать движение.

Но есть еще один момент в том, что он как-то не слишком активно перемещается по странице.

Давайте также это исправим.

Для этого нам нужно добавить сюда, к курсору, к селектору класса.

К курсору здесь нам нужно добавить более плавный переход.

За это отвечает у нас свойство transition.

Сюда мы укажем width.

Укажем transition property width.

Будет ширина на 0.3 секунды, более плавный переход.

И через запятую укажем height.

Также на 0.3 секунды.

Это у нас будет ширина и высота.

Теперь давайте перейдем на страницу.

И как мы видим, теперь у нас курсор нормально и адекватно перемещается по странице.

Таким вот образом у нас получилось сделать

Пользовательский курсор анимированный, используя HTML, CSS и простой JavaScript.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.