<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>
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>
