Перейти к содержимому
↔️

Слайдер сравнения изображений

Сравнивайте два изображения с перетаскиваемым слайдером до/после. Загружайте, тяните маркер, делитесь. Отлично для ретуши, итераций дизайна. В браузере.

Загрузите оба изображения, чтобы начать.

Как работает слайдер?

Слайдер сравнения накладывает два изображения и показывает каждое в зависимости от позиции маркера. Используется clip-path в CSS для обрезки верхнего изображения, поэтому перетаскивание ускоряется GPU и плавное. Оба изображения загружаются как Object URL в вашем браузере и никуда не отправляются.

Применение

  • Ретушь фото — показывайте правки бок о бок.
  • QA дизайна — визуально сравнивайте версии дизайна.
  • Ремонт — представляйте комнаты до/после.
  • Маркетинг — показывайте трансформацию продуктов.

Конфиденциальность

Вся обработка выполняется на 100% в вашем браузере. Данные не отправляются на сервер.