От автора: предположим, вы хотите переместить CSS background position элемента, когда на него наводится указатель мыши, чтобы сделать дизайн более интересным.
У вас есть такой элемент:
1 |
<div class="module" id="module"></div> |
И вы задаете для него фон:
1 2 3 |
.module { background-image: url(big-image.jpg); } |
Вы можете настроить положение фона в JavaScript следующим образом:
1 2 3 4 5 6 |
const el = document.querySelector("#module"); el.addEventListener("mousemove", (e) => { el.style.backgroundPositionX = -e.offsetX + "px"; el.style.backgroundPositionY = -e.offsetY + "px"; }); |
Или вы можете вместо этого изменить пользовательские свойства CSS в JavaScript:
1 2 3 4 5 6 |
const el = document.querySelector("#module"); el.addEventListener("mousemove", (e) => { el.style.setProperty('--x', -e.offsetX + "px"); el.style.setProperty('--y', -e.offsetY + "px"); }); |
1 2 3 4 5 6 |
.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
Источник: //css-tricks.com/
Редакция: Команда webformyself.