Эффект Before & After. Плагин twenty обзор

Эффект было-стало, неплохой штрих при создании сайта, чтобы подчеркнуть качество какой либо услуги, например ретушь, или услуги визажиста, так же используется просто в сравнительных целях без коммерческой жилки. Например впервые где я обратил внимание на подобный плагин, это на ресурсе compressor.io разработанный известным FRONT-END разработчиком STEPHANE LYVER, где эффект явно показывает что сжатие изображения происходит без потери качества но при этом с отличным результатом на выходе.

 

Чтобы начать работу с плагином достаточно создать контейнер DIV задать для него id и поместить в контейнер 2 изображения, до и после,

 

Пример :

 

<div id='container1'>

  <img src='image/before.png' />

  <img src='image/after.png' />

</div>

Затем вызываем плагин twentytwenty() помещая скрипт в head

 

$(window).load(function() {
$('#container1').twentytwenty();
});

 

 

Для работы необходимо подключить 2 библиотеки js (jquery.twentytwenty.js и jquery.event.move.js)