Разница изображений было/стало

Решения для создания эффекта было-стало, либо разницы между двумя изображениями

Простой скрипт, изображения прописываются в CSS

Верстка:

<div class="container">

    <div class="divider-wrapper">

    <div class="code-wrapper">
        <div class="design-wrapper">
        	<div class="design-image"></div>
        </div>
    </div>

    	<div class="divider-bar"></div>
    </div>

</div>

Скрипт

<script>

(function($){
$(function(){

    $('.code-wrapper').on( "mousemove", function(e) {
      var offsets = $(this).offset();
      var fullWidth = $(this).width();
      var mouseX = e.pageX - offsets.left;

      if (mouseX < 0) { mouseX = 0; }
      else if (mouseX > fullWidth) { mouseX = fullWidth }


      $(this).parent().find('.divider-bar').css({
        left: mouseX,
        transition: 'none'
      });
      $(this).find('.design-wrapper').css({
        transform: 'translateX(' + (mouseX) + 'px)',
        transition: 'none'
      });
      $(this).find('.design-image').css({
        transform: 'translateX(' + (-1*mouseX) + 'px)',
        transition: 'none'
      });
    });
    $('.divider-wrapper').on( "mouseleave", function() {
      $(this).parent().find('.divider-bar').css({
        left: '50%',
        transition: 'all .3s'
      });
      $(this).find('.design-wrapper').css({
        transform: 'translateX(50%)',
        transition: 'all .3s'
      });
      $(this).find('.design-image').css({
        transform: 'translateX(-50%)',
        transition: 'all .3s'
      });
    });
  
}); // end of document ready
})(jQuery); // end of jQuery name space

</script>

CSS

/* Divider Styles */

.divider-wrapper {
    width: 800px;
    height: 458px;
    margin: 0 auto;
    position: relative;
}

.divider-wrapper:hover {
    cursor: none;
}

.divider-bar {
    position: absolute;
    width: 2px;
    left: 50%;
    top: 2px;
    bottom: -2px;
    color: fff;
    background-color: #fbedc8;
    /*background-image: -webkit-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);
      background-image: -moz-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);
      background-image: -o-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);
      background-image: linear-gradient(to bottom,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);*/
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
}

.code-wrapper {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border: 2px solid #222;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("/wp-content/uploads/2016/07/photo0.jpg") no-repeat;
}

.design-wrapper,
.design-image {
    border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
}

.design-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.design-image {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url("/wp-content/uploads/2016/07/photo.jpg") no-repeat;
}

Пример:

Плагин Image Comparison Slider

Скачиваем плагин. Подключаем к сайту файлы стилей (css/style.css) и сам скрипт (js/main.js).

Верстка файлов:

<figure class="cd-image-container">
	<img src="/wp-content/uploads/2023/12/difference-b.jpg" alt="Original Image">
	<span class="cd-image-label" data-type="original">После</span>
	
	<div class="cd-resize-img">
		<img src="/wp-content/uploads/2023/12/difference-a.jpg" alt="Modified Image">
		<span class="cd-image-label" data-type="modified">До</span>
	</div>
	
	<span class="cd-handle"><i class="icon-arrow-up-right-and-arrow-down-left-from-center1"></i></span>
</figure>

Инициализируем скрипт:

jQuery(document).ready(function($){
	$('.cd-image-container').each(function(){
	   var actual = $(this);
	   drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual);
	});
});


function drags(dragElement, resizeElement, container) {
	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 its 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); 
 
		  //function to upadate images label visibility here
		  // ...
 
	   }).on("mouseup vmouseup", function(e){
		  dragElement.removeClass('draggable');
		  resizeElement.removeClass('resizable');
	   });
	   e.preventDefault();
	}).on("mouseup vmouseup", function(e) {
	   dragElement.removeClass('draggable');
	   resizeElement.removeClass('resizable');
	});
}

Поделиться в соц. сетях: