Как создать интерактивное сравнение изображений «До и после»: сервис Interacty

«До и после» — этот формат еще называют «Было/стало» или «Тогда и сейчас» — позволяет эффектно сравнить любые два изображения, включая гифки.

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

Как создать «До и после»?

Свое собственное сравнение можно создать за несколько минут с помощью универсального конструктора интерактивного контента Interacty. Для этого откройте галерею шаблонов и выберите механику «До и после».

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

Выбрали подходящий вариант? Нажмите «Использовать шаблон». Если вы не зарегистрированы, то сервис предложит создать аккаунт (это бесплатно и займет меньше минуты). Если аккаунт уже есть, то вы сразу же попадете в редактор Interacty.

Перед вами — готовый к публикации проект. Достаточно просто загрузить нужные картинки и настроить оформление в соответствии с вашей идеей.

Для загрузки картинок «До и после» кликните по центральной картинке (в нашем случае это старый и современный Лондон) — блок сравнения выделится голубой обводкой. Теперь весь этот блок можно масштабировать и двигать внутри рабочей области. При этом на панельке справа появятся кнопки загрузки изображений для левой и правой картинок.

Нажмите на кнопку загрузки («Изменить») — перед вами появится всплывающее окно с возможностью выбрать или загрузить изображения. Для примера мы взяли фотографии тающих ледников с сайта NASA.

Если вы выбрали шаблон без текстов, то ваш проект уже готов — публикуйте!

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

Если нужно добавить логотип или, скажем, кнопку «Поделиться» ВКонтакте — включите режим «Эксперт» (на панели справа). В этом режиме можно добавить тексты, картинки и кнопки, перетащив их на рабочую область или просто кликнув на нужный элемент.

У нас получился такой проект:

Если вы активно изменяли дизайн проекта, не забудьте переключиться в мобильный редактор и адаптировать ваш проект для мобильных устройств. Достаточно просто подравнять блоки и вернуть «расползшиеся» тексты и кнопки обратно в рабочую область — это займет около минуты.

Перед публикацией можно настроить то, как ссылка на ваш проект будет отображаться в социальных сетях. Для этого перейдите в таб «Проверка» и нажмите на кнопку «Редактировать».

В открывшемся окне вы сможете указать нужный вам заголовок и пояснительный текст, а также загрузить картинку — поставим уже знакомую нам картинку с сайта NASA.Обратите внимание на панельку слева.

«Основные настройки» — это то, как будет выглядеть ссылка на проект, если поделиться ею в мессенджерах или социальных сетях.
Экран 1 и 2 — это настройка внешнего вида поста в Фейсбуке и ВКонтакте при нажатии на кнопки «Поделиться» (ведь мы поставили две социальные кнопки). В нашем примере будем использовать везде одинаковые значения.
Если вы планируете встроить проект на сайт — в поле «Переадресация» укажите страницу, на которой он будет размещен.

После публикации проект будет выглядеть красиво и именно так, как вам нужно.

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

Вот что у нас получилось в итоге: «Самые жаркие дни в Антарктиде за всю историю наблюдений» (клик).

Инструкция актуальна на октябрь 2020 года.