Виджетик для сравнения двух картинок

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений можно придумать много : везде, где мы имеем две одинаковые картинки, одна из которых — «до», а вторая «после». Можно, конечно, просто выложить начальное и конечное изображение рядом. Но мне пришла в голову следующая идея (видимо, где то подсмотрел).

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

Виджета у меня пока нет, давайте его сварганим.

Для тестирования мне понадобилась картинка.

earth-500

И её обработанная версия, в которой я убрал красный цвет.

earth-500-green

Это могут быть любые картинки, важно, что они одинакового размера.

Я хочу, чтобы работало это так: я размещаю две картинки в каком то контейнере и передаю id этого контейнера некой функции, которая делает всю остальную работу, т.е. создаёт описанный выше виджет.  Т.е. работала html вида:

Осталось только написать код функции build_slider(id). :)

Понятно, что функцию я заранее написал и протестировал, потому я расскажу как она работает. Функция создает вместо двух картинок три контейнера : два с картинками и один служит специальным разделителем. Потом я подцепляю обработчики мыши так, чтобы разделитесь начал выполнять свою функцию.

Для разделителя я создаю вот такие стили:

Это будет тонкая вертикальная белая полоска. Курсор над ней будет принимать вид двойной стрелки — как будто для изменения размера по горизонтали.

А вот код функции:

Следование разделителя также прекращается за 10 пикселей от краёв картинки, чтобы не потерять разделитель из виду. Для временного хранения данных я использую атрибуты основного контейнера. Осталось только показать виджет в действии.

Вуаля!

earth-500
earth-500-green

Написать комментарий

Мало букафф? Читайте есчо !

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

 

Комментарии к «Виджетик для сравнения двух картинок»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: