Эффект «до-после» для сайта с помощью JS

Мы столкнулись с интересной задачей, а именно реализацией эффекта «до-после» для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.

Давайте посмотрим, что у нас с этого всего получилось.

Шаг 1. HTML

Начать работу с плагином очень просто. Для начала создайте контейнер div и поместите в него два изображения: без эффекта и с эффектом. Пример:

Как вы заметили ничего сложного, все элементарно просто.

Шаг 2. jQuery

Затем, вызываем плагин twentytwenty():

Работа данного плагина зависит от двух библиотек:

• jquery
• jquery.event.move: обеспечивает функционирование для сенсорных устройств.

Вот и все. Готово!