<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

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

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

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

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

При наведении на элемент, можно менять не только его внешний вид посредством CSS, но и самого курсора. А с помощью JavaScript реагировать на событие mousemove, и следовать за мышкой.

Создание иконок и курсора

Используя библиотеку FontAwesome, создадим три иконки внутри маркированных списков и новый курсор (cursor).

<head>
    ...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    ...
</head>
<ul>
    <li><a href="#"><i class="fa fa-gift" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-apple" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
    <div class="cursor"></div>
</ul>


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

Стилизация иконок

*{
    margin: 0;
    padding: 0;
}
body{
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
ul{
    position: relative;
    display: flex;
}
ul li{
    list-style: none;/ * убираем маркеры * /
    margin: 0 20px;
}
ul li a{
    position: relative;
    display: inline-block;
    font-size: 7em;
    text-decoration: none;
    color: #EF9A9A;
    transition: 0.2s;
}


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

Стилизация курсора

Теперь стилизуем созданный ранее в HTML разметке блок. Вместо дефолтного курсора pointer-events, создадим свой кастомный курс, в виде едва заметного кружка.

ul .cursor{
    position: fixed;
    width: 0;
    height: 0;
    border: 4px solid #EF9A9A;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: width 0.2s,height 0.2s;
    pointer-events: none; / * убираем дефолтный курсор * /
}


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

Создание hover-эффекта

Сейчас при наведении на иконку, меняется только ее цвет. Внешний вид курсора меняется сам по себе, без привязки к самим иконкам. Он пока не двигается за мышкой.

ul li:hover a{
    color: #B71C1C;
}

ul li:hover ~ .cursor {
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    border: 2px solid #EF9A9A;
}


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

Привязка курсора к мышке

Найдем наш курсор (div с классом cursor) на странице и занесем его в переменную для дальнейших манипуляций с ним. Мы отлавливаем событие mousemove (движение мыши). Подключим к странице обработчик событий addEventListener. Сразу, как только обработчик зафиксирует движение мыши, запустится функция. Данная функция отслеживает верхнюю и нижнюю координаты мыши в текущий момент и сообщает их браузеру. В результате кастомный курсор послушно следует за мышкой.

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.pageX + "px";
    cursor.style.top = e.pageY + "px";
});


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

Посмотрите пример на CodePen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.