Слайдер было/стало, фотосравнение
Наглядно сравниваем два состояния одного объекта
Две фотографии, наложенные друг на друга так, что видна только часть каждой. Перемещая ползунок, можно открывать разные части изображения и таким образом сравнивать их между собой.
Простая в освоении технология, которая позволяет наглядно показать изменения. Используйте её для историй о трансформациях людей, зданий, территорий. Показывайте своим пользователям, как подвижна граница между прошлым и настоящим, настоящим и будущим, реальным и потенциально возможным.
Фотосравнение подойдёт, если
- Есть два снимка одного места или объекта в разное время
- Хотите показать трансформацию, а не просто поставить фото рядом
- Ракурс и композиция кадров совпадают между «было» и «стало»
Чтобы делать интересные слайдеры, нужно уметь видеть динамику. Есть проект ремонта набережной? Сфотографируйте дизайнерские идеи и с этой же точки снимите набережную сейчас. Дайте возможность пользователям увидеть будущее. Нашли архивные фотографии узнаваемого дома? Сфотографируйте это место точно с такого же ракурса. Есть фотография друзей, снятая 15 лет назад? Соберите их вместе, оденьте в похожую одежду, повторите композицию. Эффект такой же, как от размещения двух фотографий рядом, только лучше.
Технологию можно освоить минут за пятнадцать.
Что подготовить перед созданием фотосравнения
- Снимите или найдите архивное фото и повторите точно тот же ракурс сейчас
- Проверьте, что оба кадра сопоставимы по композиции
Как сделать слайдер «было/стало»
- Загрузите оба изображения в сервис слайдера
- Настройте направление ползунка
- Проверьте на телефоне — слайдер должен быть удобен на маленьком экране
Сервисы и инструменты
- JuxtaposeJS Инструмент для интерактивного сравнения двух изображений ползунком
- Удоба Конструктор интерактивных материалов без программирования
- Interacty Конструктор интерактивных материалов, игр и виджетов без программирования
