Как приблизить изображение по координатам мышки

Question

Хочу сделать на сайт приближение картинки при наведении, как это реализовано в aliexpress, ниже прикреплю пример, хотел узнать есть ли видео или какие-то библиотеки по этой теме?

Answer 1

Зачем библиотеки? Несколько строчек css и mousemove event listener

const imageSize = { width: 1920, height: 1080 };
const image = document.querySelector('.image');

image.addEventListener('mousemove', (event) => {
  const rect = event.target.getBoundingClientRect();
  image.style.setProperty('--x', (rect.left - event.clientX) * (imageSize.width - rect.width) / rect.width);
  image.style.setProperty('--y', (rect.top - event.clientY) * (imageSize.height - rect.height) / rect.height);
});

.image {
  background: url(https://i.stack.imgur.com/5ahjI.png) 100% 100% no-repeat;
  background-size: cover;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.image:hover {
  background-size: auto;
  background-position-x: calc(var(--x, 0) * 1px);
  background-position-y: calc(var(--y, 0) * 1px);
}

<div class="image"></div>

БЛОГ НА HUSL

Как приблизить изображение по координатам мышки

Ответы (1 шт):