15 февраля 2023 года Canva отпраздновала 15 миллиардов дизайнов на своей платформе, что стало важной вехой для компании. Чтобы отпраздновать это событие, компания создала специальное фоновое изображение с дизайном, созданным на платформе. Когда вы перемещаете мышь по странице, изображение раскрывается, создавая крутой эффект. Мне это показалось интересным, и я решил воссоздать его с помощью HTML, CSS и JavaScript. Эта статья покажет вам, как воссоздать эффект шаг за шагом.
Предпосылки
В этой статье предполагается, что у вас есть базовые знания HTML, CSS и JavaScript. Вам также понадобится редактор кода и веб-браузер. Я буду использовать VS Code и Chrome, но вы можете использовать все, что вам нравится.
Чтобы продолжить, клонируйте или загрузите стартовые файлы здесь
Начиная
Сначала создайте разметку HTML для контейнера и фонового изображения. Контейнер — это место, где фоновое изображение будет отображаться при наведении.
<div class="container"> <h1>Thanks for <u>15 billion designs!</u></h1> <input type="text" placeholder="Search your content or Canva's" /> <div class="hover"></div> </div>
Контейнер — это место, где будет находиться весь контент. Раздел hover
пока пуст, но мы добавим фоновое изображение с помощью CSS.
Стилизация контейнера
Затем скопируйте следующий CSS в файл styles.css
. Это придаст стиль контейнеру и другим элементам в приложении.
.container { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: auto; width: 100%; height: 25rem; background: linear-gradient( 119.42deg, #cc00c4 8.94%, #7d2ae8 54.02%, #00c4cc 95.49% ); border-radius: 8px; text-align: center; padding: 0.5rem; overflow: hidden; } h1 { color: #fff; font-size: 3rem; position: relative; z-index: 10; margin-top: 1rem; } input { position: relative; margin-top: 2rem; padding: 9px 4px 9px 40px; border: 1px solid #2b3b4a4d; outline: none; color: #0d1216; padding: 0 12px; font-size: 1rem; border-radius: 4px; height: 2.5rem; width: 40rem; max-width: 100%; z-index: 10; }
В приведенном выше CSS мы установили для контейнера значение position: relative
, чтобы мы могли разместить фоновое изображение внутри него. Мы также устанавливаем для свойства overflow
значение hidden
, чтобы фоновое изображение не переполняло контейнер.
Мы также устанавливаем для свойства z-index
элементов h1
и input
значение 10
, чтобы они отображались над фоновым изображением или поверх него.
Вот что мы имеем на данный момент:
Добавление фонового изображения
Далее мы нацелимся на класс .hover
и добавим фоновое изображение. Мы также установим для свойства position
значение absolute
, чтобы мы могли разместить изображение внутри контейнера.
Скопируйте следующий CSS в файл styles.css
:
.hover { opacity: 0; position: absolute; transition: all 0.5s ease; width: 10rem; height: 10rem; background: url(img/giphy.gif) 50% 50% fixed; border-radius: 50%; box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.15); filter: blur(1px); z-index: 5; }
Для свойства opacity
установлено значение 0
, поэтому изображение по умолчанию скрыто. Мы будем использовать JavaScript, чтобы изменить прозрачность на 1
, когда пользователь наводит курсор на контейнер.
Кроме того, для свойства background
мы использовали сокращенный синтаксис для установки фонового изображения, положения, размера и повторения. Мы также устанавливаем значение fixed
для свойства background-attachment
, чтобы изображение оставалось на месте при перемещении мыши.
Если вы предпочитаете, вы можете использовать полный синтаксис, чтобы установить фоновое изображение, положение, размер и повтор:
background-image: url(img/giphy.gif); background-position: 50% 50%; background-attachment: fixed;
Отображение фонового изображения
Чтобы показать фоновое изображение, мы будем использовать JavaScript для отслеживания движения курсора мыши пользователя и изменения непрозрачности фонового изображения.
Создайте новый файл с именем app.js
и добавьте следующий код:
const hover = document.querySelector(".hover"); const hoverWHalf = hover.offsetWidth / 1.5; const container = document.querySelector(".container"); container.addEventListener("mousemove", (e) => { hover.style.left = e.pageX - hoverWHalf + "px"; hover.style.top = e.pageY - hoverWHalf + "px"; hover.style.opacity = "1"; });
В приведенном выше коде мы сначала выбираем элементы .hover
и .container
, используя метод querySelector
.
Затем мы добавляем прослушиватель событий к элементу контейнера. Прослушиватель событий отслеживает событие mousemove
, поэтому всякий раз, когда пользователь наводит указатель мыши на контейнер, код вычисляет положение элемента .hover
и динамически обновляет его position
и opacity
.
В частности, он вычисляет горизонтальную и вертикальную среднюю точку элемента .hover
, используя свойство offsetWidth
, а затем вычитает половину этого значения из свойств pageX
и pageY
события mousemove, чтобы определить положение элемента .hover относительно курсора мыши.
Не забудьте связать файл app.js
внутри файла index.html
;)
<script src="app.js"></script>
Таким образом, мы успешно создали эффект наведения мыши. Вот окончательный результат:
Ознакомьтесь с живой демонстрацией и исходным кодом на Github.
Заключение
И вот оно! Вы дошли до конца этой статьи о создании визуального интереса с помощью эффекта наведения MouseMove с помощью HTML, CSS и JavaScript. К настоящему моменту вы уже должны хорошо понимать, как использовать эту технику, чтобы добавить азарта и творчества на ваш сайт.
Помните, что существует бесчисленное множество способов настроить этот эффект и сделать его своим. Не бойтесь экспериментировать с различными изображениями, цветами и анимацией, чтобы создать образ, идеально соответствующий вашему бренду или личному стилю.
По мере того, как вы продолжаете развивать свои навыки веб-дизайна, обязательно следите за новыми и захватывающими тенденциями в отрасли. Кто знает, может быть, вы обнаружите следующую большую вещь :)
Спасибо за чтение! Я надеюсь, что вы нашли эту статью полезной. Если да, то ставьте лайк и делитесь с друзьями и коллегами :)
Я хотел бы связаться с вами через Twitter | LinkedIn | Гитхаб | Портфолио.
Ресурсы
- Использование пользовательских курсоров с JavaScript для лучшего UX
- Как центрировать элемент HTML с помощью JavaScript
- Веб-документы MDN — mousemove
Первоначально опубликовано на https://israelmitolu.hashnode.dev.