Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Фоны, изменяющие положение в зависимости от движения указателя

25 октября 2018 | Опубликовано в css | Нет комментариев »

Сегодня мы научимся создавать фоны, которые изменяют положение в зависимости от движения указателя. Это интересный эффект, который поможет вам оживить страницу, добавить ненавязчивый, но приятный интерактив. Для этого нам нужно будет поработать с 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

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

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




Оставить ответ


− 7 = ноль

Вставить изображение