Мы столкнулись с интересной задачей, а именно реализацией эффекта "до-после" для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.
Давайте посмотрим, что у нас с этого всего получилось.
Шаг 1. HTML
Начать работу с плагином очень просто. Для начала создайте контейнер div и поместите в него два изображения: без эффекта и с эффектом. Пример:
<div id='container1'>
<img src='sample-before.png' />
<img src='sample-after.png' />
</div>
Как вы заметили ничего сложного, все элементарно просто.
Шаг 2. jQuery
Затем, вызываем плагин twentytwenty():
$(window).load(function() {
$('#container1').twentytwenty();
});
Работа данного плагина зависит от двух библиотек:
jquery
jquery.event.move: обеспечивает функционирование для сенсорных устройств.
