технология

Как сделать слайдер
«было/стало»

JuxtaposeJS — лёгкий и удобный инструмент для создания слайдера «было/стало».

Как использовать JuxtaposeJS

В раздел Create a Juxtapose slider добавьте две фотографии: по ссылкам или из Dropbox, Flickr, Google Drive. Из двух изображений вы получаете одно, поделённое ползунком на две части.

Berliner Morgenpost использовало JuxtaposeJS, чтобы сравнить Берлин 1945 года и современную столицу Германии

Установите настройки — они абсолютно исчерпывающие:

  • Стартовая позиция слайдера
  • Лейблы
  • Подписи
  • Анимация ползунка
  • Масштаб изображения
  • Вертикальный или горизонтальный слайдер

Готовый слайдер можно встраивать через iFrame или на Medium с помощью специально адаптированной ссылки.

Как сделать фотослайдер «до и после» с помощью сервиса Juxtapose

В результате получается наглядная иллюстрация изменений: пользователю не нужно переводить взгляд с одной фотографии не другую. Большое преимущество JuxtaposeJS — его простота. Пользователь выбирает минимальное количество параметров, а значит, риск сделать что-то не то сводится к нулю. Кроме того, для использования инструмента не нужно уметь кодить. Наконец, этот инструмент работает на всех платформах и девайсах, что делает его универсальным.

Чем Juxtapose лучше других подобных инструментов?

В отличие от TwentyTwenty и Double Viewer JuxtaposeJS не нужно скачивать и преобразовывать под него свой код.

От Jquery Sequence его отличает большее разнообразие: в Sequence полоска слайдера может располагаться только горизонтально и делить картинку пополам, а в Juxtapose можно выбрать несколько вариантов в настройках.

Кроме того, Juxtapose удобнее использовать, чем Before After Image Slider: последний работает только в комплекте с фреймворком Vafpress: для корректной работы придется скачивать и Before After, и этот фреймворк.

С помощью этой технологии были реализованы следующие проекты

Иллюстрации:
скриншоты

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!