Image Comparison Slider | Image Comparison Slider using html css and javascript

Image Comparison Slider | Image Comparison Slider using html css and javascript

Image Comparison Slider | Image Comparison Slider using html css and javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create an Image Comparison Slider. We use HTML, Css, and javascript for this Image Comparison Slider. I hope you enjoy our blog so let's start with a basic HTML structure for the Image Comparison Slider.

HTML Code

           <figure class="cd-image-container">  
           <img src="https://source.unsplash.com/KbR06h9dNQw/768x460" alt="Original Image">  
           <span class="cd-image-label" data-type="original">Crowded</span>  
           <div class="cd-resize-img"> <!-- the resizable image on top -->  
                <img src="https://source.unsplash.com/jFCViYFYcus/768x460" alt="Modified Image">  
                <span class="cd-image-label" data-type="modified">Quiet</span>  
           </div>  
           <span class="cd-handle"></span>  
 </figure>  
 <header>  
  <h1>Image Comparison Slider</h1>  
 </header>  
 
There is all the HTML code for the Image Comparison Slider. Now, you can see an output with Image Comparison Slider then we write javascript for the Image Comparison Slider.
output
Image Comparison Slider | Image Comparison Slider using html css and javascript

Image Comparison Slider | Image Comparison Slider using html css and javascript

CSS code

 /* --------------------------------   
 Primary style  
 -------------------------------- */  
 *, *:after, *:before {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
 }  
 body {  
  font-size: 100%;  
  font-family: "Roboto Slab", sans-serif;  
  color: #445b7c;  
  background-color: #363636;  
  padding: 1rem .5rem;  
 }  
 a {  
  color: #dc717d;  
  text-decoration: none;  
 }  
 img {  
  max-width: 100%;  
 }  
 /* --------------------------------   
 Main components   
 -------------------------------- */  
 header {  
  position: relative;  
  height: 160px;  
  line-height: 160px;  
  text-align: center;  
 }  
 header h1 {  
  font-size: 22px;  
  font-size: 1.375rem;  
  color: #ffffff;  
  font-weight: 300;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
 }  
 @media only screen and (min-width: 768px) {  
  header {  
   height: 6em;  
   line-height: 1.6;  
  }  
  header h1 {  
   font-size: 32px;  
   font-size: 2rem;  
  }  
 }  
 .cd-image-container {  
  position: relative;  
  width: 90%;  
  max-width: 768px;  
  margin: 0em auto;  
 }  
 .cd-image-container img {  
  display: block;  
 }  
 .cd-image-label {  
  position: absolute;  
  font-weight: 500;  
  letter-spacing: 1px;  
  top: 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;  
 }  
 .cd-image-label.is-hidden {  
  visibility: hidden;  
 }  
 .is-visible .cd-image-label {  
  opacity: 1;  
  -webkit-transform: translateY(0);  
  -moz-transform: translateY(0);  
  -ms-transform: translateY(0);  
  -o-transform: translateY(0);  
  transform: translateY(0);  
 }  
 .cd-resize-img {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 0;  
  height: 100%;  
  overflow: hidden;  
  /* Force Hardware Acceleration in WebKit */  
  -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;  
 }  
 .cd-resize-img img {  
  position: absolute;  
  left: 0;  
  top: 0;  
  display: block;  
  height: 100%;  
  width: auto;  
  max-width: none;  
 }  
 .cd-resize-img .cd-image-label {  
  right: auto;  
  left: 0;  
 }  
 .is-visible .cd-resize-img {  
  width: 50%;  
  /* bounce in animation of the modified image */  
  -webkit-animation: cd-bounce-in 0.7s;  
  -moz-animation: cd-bounce-in 0.7s;  
  animation: cd-bounce-in 0.7s;  
 }  
 @-webkit-keyframes cd-bounce-in {  
  0% {  
   width: 0;  
  }  
  60% {  
   width: 55%;  
  }  
  100% {  
   width: 50%;  
  }  
 }  
 @-moz-keyframes cd-bounce-in {  
  0% {  
   width: 0;  
  }  
  60% {  
   width: 55%;  
  }  
  100% {  
   width: 50%;  
  }  
 }  
 @keyframes cd-bounce-in {  
  0% {  
   width: 0;  
  }  
  60% {  
   width: 55%;  
  }  
  100% {  
   width: 50%;  
  }  
 }  
 .cd-handle {  
  position: absolute;  
  height: 44px;  
  width: 44px;  
  /* center the element */  
  left: 50%;  
  top: 50%;  
  margin-left: -22px;  
  margin-top: -22px;  
  border-radius: 50%;  
  background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-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);  
 }  
 .cd-handle.draggable {  
  /* change background color when element is active */  
  background-color: #445b7c;  
 }  
 .is-visible .cd-handle {  
  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;  
 }  
 footer {  
  padding: 2rem;  
 }  
 footer p {  
  font-size: 90%;  
  font-weight: 300;  
  text-align: center;  
 }  
Css Updated output

Image Comparison Slider | Image Comparison Slider using html css and javascript

Javascript(Jquery) code

Cdn link Jquery

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
 jQuery(document).ready(function($){  
   var dragging = false,  
     scrolling = false,  
     resizing = false;  
   //cache jQuery objects  
   var imageComparisonContainers = $('.cd-image-container');  
   //check if the .cd-image-container is in the viewport   
   //if yes, animate it  
   checkPosition(imageComparisonContainers);  
   $(window).on('scroll', function(){  
     if( !scrolling) {  
       scrolling = true;  
       ( !window.requestAnimationFrame )  
         ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)  
         : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});  
     }  
   });  
   //make the .cd-handle element draggable and modify .cd-resize-img width according to its position  
   imageComparisonContainers.each(function(){  
     var actual = $(this);  
     drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));  
   });  
   //upadate images label visibility  
   $(window).on('resize', function(){  
     if( !resizing) {  
       resizing = true;  
       ( !window.requestAnimationFrame )  
         ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)  
         : requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});  
     }  
   });  
   function checkPosition(container) {  
     container.each(function(){  
       var actualContainer = $(this);  
       if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {  
         actualContainer.addClass('is-visible');  
       }  
     });  
     scrolling = false;  
   }  
   function checkLabel(container) {  
     container.each(function(){  
       var actual = $(this);  
       updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');  
       updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');  
     });  
     resizing = false;  
   }  
   //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/  
   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) {  
         if( !dragging) {  
           dragging = true;  
           ( !window.requestAnimationFrame )  
             ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)  
             : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});  
         }  
       }).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 animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {  
     var 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;  
     }  
     var 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');  
     dragging = false;  
   }  
   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') ;  
     }  
   }  
 });  
Final output
Image Comparison Slider | Image Comparison Slider using html css and javascript

Image Comparison Slider | Image Comparison Slider using html css and javascript

Image Comparison Slider | Image Comparison Slider using html css and javascript


Now that we have completed our Jquery section,  Here is our updated output with JqueryHope you like the Image Comparison Slider Using Jquery. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create an Image Comparison Slider Using Jquery using simple HTML & CSS, and Jquery If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Code by - Luis Colomé

Post a Comment

Previous Post Next Post