От автора: предположим, вы хотите переместить CSS background position элемента, когда на него наводится указатель мыши, чтобы сделать дизайн более интересным.
У вас есть такой элемент:
<div class="module" id="module"></div>
И вы задаете для него фон:
.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");
});.module { --x: 0px; --y: 0px; background-image: url(large-image.jpg); background-position: var(--x) var(--y);
}Вот пример, в котором фон перемещается непосредственно через JavaScript, но с примененным переходом, поэтому он плавно перемещается в новую позицию, а не дергается:
Или вместо этого вы можете перенести фактический элемент (вместо фона). Вы сделали бы это, если в перемещающемся элементе был бы какой-то контент или интерактивные взаимодействия. Вот пример, который снова задает пользовательские свойства CSS, но затем перемещает сам элемент через translate() и calc(), чтобы замедлить скорость.
Я уверен, что есть множество других способов сделать это — перемещение SVG viewBox, скрипты, управляющие холстом, webGL … кто знает! Если у вас есть какие-то более увлекательные способы сделать это, напишите в комментариях.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.