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 | Гитхаб | Портфолио.

Ресурсы

Первоначально опубликовано на https://israelmitolu.hashnode.dev.