Сравнение двух фото на сайте с помощью jQuery При создании страницы с продуктом возникает необходимость показать пользователю какое отличие между различными вариантами, для этого можно поставить изображения стопкой, чтобы пользователь увидел отличия, но лучше всего чтобы посетитель принимал участие в сравнении. В сегодняшнем уроке мы рассмотрим как создать эффект наложения двух фото с возможностью сравнения средством передвижения манипулятора на изображении.  При этом пользователь наглядно увидит отличия между изображениями и сделает свое заключение.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Такой эффект станет весьма удобным для интернет магазина, где клиенту необходимо сравнить несколько различных цветовых палитр продукта.

Шаг 1. HTML

Для создания разметки нам необходимо воспользоваться элементом <figure> в качестве контейнера для наших изображений:

В разметке нет ничего сложного, нам просто необходимо вывести два изображения, при этом добавив обвертку с подписями и ползунок, который посетитель сможет перетаскивать в установленном контейнере.

Сравнение двух фото на сайте с помощью jQuery

Шаг 2. CSS

Оригинальное изображение задаст размер контейнеру .cd-image-container; модифицированное изображение будет располагаться в div.cd-resize-image.

Его позиция будет абсолютной, относительно контейнера .cd-image-container, а ширина будет контролироваться элементом .cd-handle (используя jQuery). Изначально ширина элемента .cd-resize-image будет равна 0, а затем меняем на 50%.

Шаг 3. JS

Теперь давайте определим несколько полезных функций необходимых для работы, и так, при нажатии и сдвиге элемента .cd-handle обновляем значение left элемента .cd-handle согласно текущей позиции мыши и меняем ширину элемента div.cd-image-size. Для поддержки мобильных устройств подключим jQuery mobile. В добавок, когда слайдер появится в зоне видимости пользователя добавляем класс .is-visible для начальной анимации.

Также определяем функцию drags(), в которой сделаем элемент .cd-handle передвигаемым.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.