Создание уникального веб-опыта с помощью пользовательских курсоров на CSS

Создание уникального веб-опыта с помощью пользовательских курсоров на CSS

От автора: создание пользовательского курсора CSS для замены стандартного указателя мыши: для чего это нужно и подробное описание примера реализации. Как создать пользовательский курсор CSS всего за 5 минут? Узнаем из статьи.

Демо того, что мы будем создавать

Я пообедал, а потом сидел с полным животом и просто бесцельно просматривал красивые сайты. Я не помню, как я туда попал, но следующие 20 минут я был занят тем, что исследовал один конкретный сайт. Несколько вещей на сайте Mutt Agency были действительно супер-крутыми, но то, что особенно меня взволновало, это интеллектуальное использование пользовательских курсоров.

На приведенном выше GIF курсор превращается в точку в верхней панели навигации, когда вы удаляетесь от основного контента.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Насколько легко это воссоздать? Логика, которая лежит в основе этого — просто одна строка.

.my-awesome-selector {
 cursor: url(../path/to/awesome/icon.svg), cursor)
}

Можете ли вы дать более подробное объяснение?

Какой лучший способ объяснить это, чем написать вместе код эффекта?

1. Перейдите на codepen.io и создайте новый pen

Мы создадим небольшое портфолио, начиная с разметки:

<main> 
  Hello. I'm Ohans. 
  User Interface Designer
  at Kudi.ai 
</main>

Тег main?

Пока все понятно. В самом деле? Пока не о чем волноваться.

2. Поместите основное содержимое в центре экрана. Flexbox в этом поможет!

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

Вот как это работает:

Ниже приведен результат этого кода:

3. Давайте сделаем это красивым.

Каждый раз, когда вы создаете уродливое приложение, кто-то умирает. Нет, не совсем так. Но давайте все же сделаем это красивым.

body {
 …
 background-color: #2980b9;
 color: #ecf0f1;
 font-size: 3em;
 text-align: center;
}
main {
 border: 1px solid #bdc3c7;
 cursor: pointer;
 max-width: 60%; 
 padding: 1.5rem 2rem;
}

Довольно простые вещи, да?

Для непосвященных max-width установит для элемента максимальную ширину. Да, вы догадались. padding: 1.5rem 2rem устанавливает дополнение к элементу с помощью сокращенного свойства поля. Верхнее и нижнее поля будут равны 1.5em, значение левого и правого полей будет равно 2rem. Вот результат:

4. Нам нужно немного больше разметки

Ладно, я соврал. Когда я сказал, что нам не нужна дополнительная разметка, это было не так. Нам нужно немного больше разметки. Я скажу вам скоро почему.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<main> 
  <div class="main_hover-up"></div>
  Hello, I'm Ohans. <br />
  User Interface Designer
  at Kudi.ai 
  <div class="main_hover-down"></div>
</main>

Мы будем захватывать взаимодействие пользователя с элементами .main_hover-up и main_hover-down. Но сначала мы должны сделать их видимыми и правильно размещенными.

5. Настройка позиционирования контекст в контейнере

main {
 position: relative;
}

Установив позиционирование контекста мы можем продолжить позиционирование дочерних элементов с помощью ключевых слов top, bottom , left и right.

6. Позиционирование и стиль элементов для захвата взаимодействия с мышью

.main_hover-up,
.main_hover-down{
  position: absolute;
  top: -102%;
  left: 0;
  height: 100%;
  width: 100%; 
  transform: scaleX(2);
  transform-origin: 50% 100%;
  background: red;
}
.main_hover-down {
  top: 102%;
}

Я знаю — это много кода.

И вот результат.

Не обращайте внимания на красный фон. Я включил его для большей визуальной наглядности.

Красный фон. В самом деле? Я знаю, вы не для того зашли так далеко, чтобы в результате получить эти уродливые красные блоки. Давайте сделаем их прозрачными.

.main_hover-up,
.main_hover-down {
 background: transparent
}

Более разумно удалить прежнее объявление background: red. По умолчанию элементы имеют прозрачный фон.

Уродливые фоны исчезли!

7. Теперь получим пользовательские курсоры!

.main_hover-up:hover {
  cursor: url(http://bit.ly/2DfPhcj), pointer;
}
.main_hover-down:hover {
  cursor: url(http://bit.ly/2GaJR5q), pointer;
}

Теперь, когда вы перемещаете указатель вверх, покидая область основного контента, появляется стрелка вверх, к области навигации. Когда вы опуститесь вниз, появляется стрелка вниз — указывая, что здесь есть другой контент.

Довольно круто!

Как это влияет на пользовательский опыт?

Если вы не знаете, что делаете, не создавайте непонятные пользовательские курсоры. Хорошо? В этом конкретном случае пользовательский опыт не страдает. Пользователь не отвлекается каким-то причудливым GIF-курсором. Вместо этого пользовательский курсор использовался для навигации по сайту. Отлично!

О, это не работает у меня.

Если у вас возникли какие-либо ошибки при использовании SVG в качестве пользовательского курсора, обязательно проверьте размеры. придерживайтесь небольших размеров. Максимум 128px * 128px. Кроме того, убедитесь, что у вас для SVG размеры ширины и высоты заданы явно — а не с использованием viewbox.

Автор: Ohans Emmanuel

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree