Рассказываем, как легко и быстро сделать крутой зум-эффект для вашего интернет-магазина при помощи чистого Javascript.
Написать этот гайд меня подтолкнул вопрос на Stackoverflow, где автор пытался сделать зум-эффект карточки товара как на Amazon. Перейдите в магазин, откройте понравившийся товар и наведите курсор на фото. Появится удобное окошко с увеличенным изображением, которое поможет вам поближе рассмотреть интересующую покупку.
В этой статье я расскажу, как сделать похожий эффект и использовать его в своих дальнейших проектах. Рассмотрим три составные части: HTML, CSS, Javascript.
HTML
Самая простая часть. Создаём два блока: в одном будет изображение меньшего размера, в другом будет его увеличенная копия. В первом блоке создаём тег img и указываем путь до картинки небольшого размера. Помимо этого, создадим произвольный data-атрибут data-zoom-img, в нём будет путь до увеличенной копии товара.
Data-атрибут нужен для отложенной загрузки изображения большего формата. Пользователь может и не воспользоваться зумом, а загружать сразу два файла мы конечно не хотим.
CSS
Тут тоже всё просто, совсем немного стилей. Укажите размер для обёртки zoom. Присвойте обёртке overflow: hidden, теперь любой контент, выходящий за её границы, будет скрыт.
Любой CSS пример на Frontext предполагает то, что у вас уже подключены Normalize.css и Autoprefixer. Не забывайте об этом.
Изучив CSS код, вы наверное уже поняли, как это работает: мы будем ловить события мыши на превью и перемещать увеличенное изображение товара внутри обёртки.
Javascript
А вот тут уже будет посложнее. Выполним работу в несколько этапов:
Инициализация
Определимся, когда нам нужно запустить зум. Скорее всего, в тот момент, когда курсор будет в зоне превью, нам нужно создать элемент с увеличенным изображением и запустить обработчик событий, реагирующий на движение мыши. Сделаем это:
Обратите внимание на то, что был создан новый элемент, где src это значение, указанное в data-атрибуте ранее. Так мы реализовали ленивую загрузку увеличенного изображения.
Уничтожение
Позаботимся о том, чтобы, когда курсор покинет область превью, элемент с увеличенным изображением и слушатель события были вовремя удалены:
Обработчик
Немного вычислений:
- Для начала нужно отслеживать движение курсора. Для этого есть event.clientX и event.clientY. Но ведь необходимы значения только в пределах области превью, а значит, от event.clientX и event.clientY мы будем вычитать расстояние от левого и верхнего края окна браузера соответственно.
- Не хотелось бы перемещать увеличенное изображение дальше его фактического размера, поэтому найдём максимальные пределы перемещения для осей x и y. Для этого надо вычесть ширину и высоту обёртки из ширины и высоты изображения.
- Если показатель движения курсора меньше допустимых пределов, то присвоим необходимый инлайн стиль. Обработчик готов.
Три этапа соединяем в один скрипт, и можно сказать, что наша работа закончена. Zoom готов!
Итог
У меня получился такой вот классный зум-эффект. Пример можно посмотреть на Codepen.
На этом всё. Надеемся, вы узнали что-то новое и сможете применить полученные знания в своих проектах. Спасибо, что читаете нас, подписывайтесь и получайте новые статьи о фронтенде от Frontext.