Сегодня мы научимся создавать фоны, которые изменяют положение в зависимости от движения указателя. Это интересный эффект, который поможет вам оживить страницу, добавить ненавязчивый, но приятный интерактив. Для этого нам нужно будет поработать с HTML, CSS и JavaScript.

Допустим, вы бы хотели изменять положение фона у элемента в зависимости от движения указателя мыши, чтобы добавить дизайну изюминку. И для этого использовать подобный элемент:

<div id="module"></div>

C заданным фоновым изображением:

.module {
  background-image: url(big-image.jpg);
}

Настраивать расположение фона с помощью JavaScript можно следующим образом:

const el = document.querySelector("#module");
el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});

Или вместо этого можно изменять свойства переменных CSS с помощью JavaScript:

const el = document.querySelector("#module");
el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX + "px");
  el.style.setProperty('--y', -e.offsetY + "px");
});

И подобного кода CSS:

.module {
  --x: 0px;
  --y: 0px;
  background-image: url(large-image.jpg);
  background-position: var(--x) var(--y);
}

Вот пример, в котором фон передвигается с помощью JavaScript, а также используется переход, чтобы при первом посещении положение фона изменялось плавно, а не скачкообразно:

Или можно двигать сам элемент, а не изменять положение его фона. Это стоит делать, если у передвигаемого элемента есть какое-то содержимое или с ним возможно взаимодействие. Вот пример, в котором опять используются свойства переменных CSS, а элемент передвигается с помощью функций CSS translate() (перенос) и calc() (вычислять), чтобы регулировать скорость:

Конечно, существует еще множество способов создать подобный эффект — двигающаяся область отображения SVG, скрипты, контролирующие объект области отображения, webGL и многие другие. Надеемся, наш урок вдохновит вас на эксперименты в этой области.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание раскладывающейся трехмерной галереи изображений
• Сильное увеличение изображения с помощью прокрутки HTML5
• Создание фонового видео, прокручивающегося вместе с содержимым