@FrontendNooob

Как сделать zoom изображения с помощью transform?

Как можно реализовать zoom изображения как на сайте https://www.adidas.ru/krossovki-falcon/B28128.html
не могу понять как внятно просчитать позицию картинки при перемещении курсора
  • Вопрос задан
  • 281 просмотр
Решения вопроса 1
twobomb
@twobomb

Размеры контейнера в классе zoomBlock ставить, а величину увеличения в классе .zoom.in
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Тебе готовый алгоритм нужен?
Врядли его тебе тут дадут.
У тебя есть позиция курсора над картинкой, исходя из этой позиции считаешь смещение (x, y) и задаешь transform translate(x,y) scale
Коефициенты прийдется подобрать експериментально
Точно так же меняешь translate во време движения курсора над каринкой. Судя по коду анимация на зум и на перемещение одна и таже
61f28fba38fb2208006676.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы