Кому пригодиться этот скрипт? 
Область применения этого плагина очень широкая. Мне сразу в голову приходят бьюти блоги, то есть про макияж и одежду. Вот там можно делать мгновенное сравнение результата мейкапа или стиля одежды той или иной звезды шоу-бизнеса. 

Также не могут обойти стороной скрипт авторы сайтов и блогов про дизайн. Вы сможете круто показать редизайн сайта или ваше личное видение фасадного ремонта Белого дома. Вообщем, есть где разыграться. 

Установка: 
Где хотите видеть эффект, вставляете код: 

<figure class="cImg-image-container"><img src="Ваше изображение ПОСЛЕ" alt="Original Image"> 
<span class="cImg-image-label" data-type="original">Posle</span> 
<div class="cImg-resize-img"> 
<img src="Ваше изображение ДО" alt="Modified Image"> 
<span class="cImg-image-label" data-type="modified">Do</span> 
</div> 
<span class="cImg-handler"></span> 
</figure>

В таблицу стилей вставляете код: 

img { 

 max-width: 100%; 

} 

.cImg-image-container { 

 position: relative; 

 width: 100%; 

 max-width: 640px; 

 margin: 0; 

} 

.cImg-image-container img { 

 display: block; 

} 

.cImg-image-label { 

 position: absolute; 

 bottom: 0; 

 right: 0; 

 color: #ffffff; 

 padding: 1em; 

 -webkit-font-smoothing: antialiased; 

 -moz-osx-font-smoothing: grayscale; 

 opacity: 0; 

 -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; 

 -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; 

 transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; 

} 

.cImg-image-label.is-hidden { 

 visibility: hidden; 

} 

.is-visible .cImg-image-label { 

 opacity: 1; 

 -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);} 

 

.cImg-resize-img { 

 position: absolute; 

 top: 0; 

 left: 0; 

 width:0; 

 height: 100%; 

 overflow: hidden; 

 -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; 

 backface-visibility: hidden; 

} 

.cImg-resize-img img { 

 position: relative; 

 left: 0; 

 top: 0; 

 display: block; 

 height: 100%; 

 width: auto; 

 max-width: none; 

} 

.cImg-resize-img .cImg-image-label { 

 right: auto; 

 left: 0; 

} 

.is-visible .cImg-resize-img { 

 width: 50%; 

 -webkit-animation: cImg-bounce-in 0.7s; 

 -moz-animation: cImg-bounce-in 0.7s; 

 animation: cImg-bounce-in 0.7s; 

} 

@-webkit-keyframes cImg-bounce-in { 

 0% { 

 width: 0; 

 } 

 60% { 

 width: 55%; 

 } 

 100% { 

 width: 50%; 

 } 

} 

@-moz-keyframes cImg-bounce-in { 

 0% { 

 width: 0; 

 } 

 60% { 

 width: 55%; 

 } 

 100% { 

 width: 50%; 

 } 

} 

@keyframes cImg-bounce-in { 

 0% { 

 width: 0; 

 } 

 60% { 

 width: 55%; 

 } 

 100% { 

 width: 50%; 

 } 

} 

.cImg-handler { 

 position: absolute; 

 height: 44px; 

 width: 44px; 

 /* center the element */ 

 left: 50%; 

 top: 50%; 

 margin-left: -22px; 

 margin-top: -22px; 

 border-radius: 50%; 

 background: #dc717d url("/icon/arrows.svg") no-repeat center center; cursor: move; 

 box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; 

 -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0);} 

.cImg-handler.draggable { 

 background-color: #445b7c; 

} 

.is-visible .cImg-handler { 

 opacity: 1; 

 -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; 

 -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; 

 transition: transform 0.3s 0.7s, opacity 0s 0.7s; 

}

Подключаем библиотеку:

<script>jQuery(document).ready(function($){ //check if the .cImg-image-container is in the viewport 

 //if yes, animate it 

 checkPosition($('.cImg-image-container')); $(window).on('scroll', function(){ checkPosition($('.cImg-image-container')); }); 

 

 //make the .cImg-handler element draggable and modify .cImg-resize-img width according to its position 

 $('.cImg-image-container').each(function(){ var actual = $(this); 

 drags(actual.find('.cImg-handler'), actual.find('.cImg-resize-img'), actual, actual.find('.cImg-image-label[data-type="original"]'), actual.find('.cImg-image-label[data-type="modified"]')); }); 

 //upadate images label visibility 

 $(window).on('resize', function(){ $('.cImg-image-container').each(function(){ var actual = $(this); 

 updateLabel(actual.find('.cImg-image-label[data-type="modified"]'), actual.find('.cImg-resize-img'), 'left'); updateLabel(actual.find('.cImg-image-label[data-type="original"]'), actual.find('.cImg-resize-img'), 'right'); }); 

 }); 

}); 

function checkPosition(container) { container.each(function(){ var actualContainer = $(this); 

 if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) { actualContainer.addClass('is-visible'); } 

 }); 

} 

// 

function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) { dragElement.on("mousedown vmousedown", function(e) { dragElement.addClass('draggable'); resizeElement.addClass('resizable'); var dragWidth = dragElement.outerWidth(), xPosition = dragElement.offset().left + dragWidth - e.pageX, containerOffset = container.offset().left, containerWidth = container.outerWidth(), minLeft = containerOffset + 10, 

 maxLeft = containerOffset + containerWidth - dragWidth - 10; 

 

 dragElement.parents().on("mousemove vmousemove", function(e) { leftValue = e.pageX + xPosition - dragWidth; 

 

 //constrain the draggable element to move inside his container 

 if(leftValue < minLeft ) { 

 leftValue = minLeft; 

 } else if ( leftValue > maxLeft) { 

 leftValue = maxLeft; 

 } 

 widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; 

 

 $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() { $(this).removeClass('draggable'); resizeElement.removeClass('resizable'); }); 

 $('.resizable').css('width', widthValue); updateLabel(labelResizeElement, resizeElement, 'left'); updateLabel(labelContainer, resizeElement, 'right'); 

 }).on("mouseup vmouseup", function(e){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); 

 e.preventDefault(); }).on("mouseup vmouseup", function(e) { dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); 

} 

function updateLabel(label, resizeElement, position) { if(position == 'left') { 

 ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; } else { 

 ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; } 

} 

</script>