В мире существует более миллиарда веб-сайтов! При этом веб-разработчикам может быть сложно создать уникальный и увлекательный веб-сайт, который по-прежнему имеет надлежащую функциональность для выполнения своей работы. У страницы так много аспектов, которые можно создавать динамически, но давайте сосредоточимся на одном, который остается в поле зрения пользователя на протяжении всего сеанса на сайте, а именно на курсоре. .
Здесь у нас есть простое веб-приложение, посвященное баскетболу. Это позволяет пользователям выбирать, кто входит в пятерку лучших игроков НБА. Поскольку это приложение очень простое (и владелец приложения хотел бы, чтобы оно оставалось таким), может показаться, что мало что можно сделать, чтобы сделать его более захватывающим. Вот тут-то и появляется наш пользовательский курсор.
Можно с уверенностью сказать, что этот курсор не на что смотреть дважды. Давайте импортируем нашу собственную фотографию баскетбола, чтобы заменить этот очень простой курсор. (Этим инструкциям можно следовать для любого изображения, просто выберите любое изображение, которое вы предпочитаете).
Первый шаг — либо создать образ, либо загрузить образ, который разрешено использовать владельцу.
Вот изображение, которое было выбрано. Имейте в виду, что курсоры намного меньше, чем средняя фотография. При создании или изменении размера изображения выберите что-то маленькое, как указано выше, и обязательно сохраните изображение в формате png с прозрачным фоном!
После того, как ваше изображение имеет правильный размер и сохранено, пришло время включить его в файл вашего проекта.
Файл, обведенный черным, — это наш html.
Файл, обведенный белым, — это наша импортированная фотография, которая будет использоваться в качестве курсора.
Файл, обведенный красным, — это наш файл CSS.
В файле HTML нам нужно определить, где мы хотим, чтобы наш эффект курсора имел место в браузере, используя идентификацию класса. Оберните класс курсора над областью, где вы хотите использовать эффект, с помощью кода, подобного приведенному ниже.
<div class="cursor"> <!-- your code here--> </div>
Теперь, когда мы указали, где мы хотим, чтобы наш пользовательский курсор отображался, нам нужно стилизовать наш курсор в файле CSS.
Используя класс курсора, который мы указали в нашем HTML-коде в строке 6, мы устанавливаем встроенный курсор в пользовательский URL-адрес в строке 7, который определяется именем файла изображения, выбранного для замены курсора. Затем мы указываем auto, который является настройкой курсора по умолчанию.
Сохраните свою работу, обновите страницу и вуаля, теперь у нас есть собственный курсор!
В конце концов, на каждую «оригинальную» идею приходятся сотни абсолютно одинаковых. Я считаю, что пользователям нравится аутентичность, а не оригинальность. Однако это не значит, что мы не можем удивить их чем-то креативным в процессе!
