С помощью формата "До и После" можно сравнить городские улицы "тогда и сейчас", показать известных людей в молодости и сегодня, результат таяния ледников или других событий. Как создать "До" и "После"? Вы можете создать собственное сравнение за несколько минут с помощью универсального конструктора интерактивного контента Interacty. Для этого откройте галерею шаблонов и выберите механику "До и после". В галерее вы найдете шаблоны с заголовком, надписью и кнопкой "поделиться".
Если вы планируете внедрить проект на свой сайт и хотите получить слайдер "До и после" в чистом виде, остановитесь на шаблоне без дополнений. Вы всегда сможете добавить их позже. Подходит ли он вам?
Нажмите "Использовать шаблон". Если у вас нет аккаунта, сервис предложит вам создать его бесплатно, и это займет меньше минуты. Если у вас уже есть аккаунт, вы сразу попадете в редактор Interacty.
Вы увидите свой проект, готовый к публикации. Все, что вам нужно сделать, это загрузить нужные изображения и настроить дизайн в соответствии с вашей идеей. Чтобы загрузить изображения до и после, щелкните по центральному изображению - в данном случае это старый и современный Лондон.
Все это поле теперь можно масштабировать и перемещать в рабочем пространстве. Когда вы это сделаете, на панели справа появятся кнопки загрузки изображений для левого и правого изображений. Нажмите кнопку "Редактировать загрузку", и вы увидите всплывающее окно с возможностью выбора или загрузки изображений. Для примера мы взяли фотографии тающих ледников с сайта NASA.
Если вы выбрали шаблон без текстов, ваш проект готов - публикуйте его! Если вы выбрали шаблон с дополнениями, самое время изменить тексты, настроить шрифт, убрать лишние элементы. Все блоки можно перемещать.
Если вы хотите добавить больше текста, например, переместите блок с фотографиями вниз - он автоматически увеличится в высоту. Если вы хотите добавить логотип или, скажем, кнопку Поделиться ВКонтакте, нажмите режим Эксперт на панели справа. В этом режиме вы можете добавлять тексты, картинки и кнопки, перетаскивая их в рабочую область или просто щелкая по нужному элементу. В итоге у вас получился такой дизайн: Если вы активно занимались редизайном, не забудьте переключиться на мобильный редактор, чтобы адаптировать дизайн для мобильных устройств.
Просто настройте блоки и верните "расползшийся" текст и кнопки в рабочую область - это займет всего около минуты. Перед публикацией вы можете настроить, как ссылка на ваш проект будет отображаться в социальных сетях. Для этого перейдите на вкладку "Проверка" и нажмите на кнопку "Изменить". Откроется окно, где вы можете выбрать заголовок и пояснительный текст, и даже загрузить фотографию - вы будете знать, что она с сайта NASA.
Посмотрите на панель слева. Экраны 1 и 2 предназначены для настройки внешнего вида поста в Facebook и ВКонтакте при нажатии кнопки Поделиться, поскольку мы установили две социальные кнопки. В нашем примере мы будем использовать одни и те же значения везде. Если вы планируете встроить проект на сайт - в поле "Redirect" укажите страницу, на которой он будет размещен. После публикации проект будет выглядеть красиво и именно так, как вам нужно. Теперь смело публикуйте свой проект: ставьте прямую ссылку на проект или встраивайте его на свой сайт или блог, используя код, который вы получили при публикации.
Учебник актуален по состоянию на октябрь. Следующие проекты были реализованы с использованием этой технологии.
Инструкции актуальны по состоянию на октябрь.
мне не надо такого добра!
Красота, особенно первая фотка
может у кого есть сылка на хорошее качество?
Что то слишком мудрено… И по-моему расчитано на блогера чем на вебмастера