How to compare two images using Image comparison slider?

Last Updated : 09 Mar, 2021

In this project, we are going to create an image slider with which we can check 2 images. If we are making an exact copy of them. We can compare every single boundary of the first image with the second image in both the vertical and horizontal directions.

Approach:

Create an HTML file in which we are going to add the main div, further we are adding two div’s in it for adding images in them.
Create a CSS file to add images in the respective div.
Create a JavaScript file for changing the direction and compare the 2 images.

HTML Code:

Firstly, create an HTML file (index.html).
Now after the creation of our HTML file, we are going to give a title to our webpage using the <title> tag. It should be placed between the <head> tag.
Then we link the CSS file that provides all the background images to our HTML. This is also placed in between the <head> tag.
Coming to the body section of our HTML code.
- Firstly, create a main div as the main box.
- In that div, add 2 more divs to add image 1 and image 2.
- At the end of our body add <script> tag which links the JavaScript file with our HTML file.

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <h1> 
      PRESS:'v' for vertical movement & 'h' \ 
      for horizontal movement 
    </h1> 
    <div class="main_box"> 
        <div class="img1"></div> 
        <div class="img2"></div> 
    </div> 
    <script src="index.js"></script> 
</body> 
</html>

CSS Code: The following is the content for the “style.css” file used in the above code. CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all the users. Consider the following points.

Restore all the browser effects.
Use classes and ids to give effects to HTML elements.

style.css

/* restoring all of the browser effects */
*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    overflow: hidden; 
} 
  
/* same effects to the body */
body{ 
    background-color: #000; 
    color: #fff; 
} 
  
/* positioning of heading */
h1{ 
    display: flex; 
    justify-content: center; 
} 
  
/* positions of main div and 2 images */
.main_box,.img1,.img2{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
  
.main_box{ 
      
    margin-top: 2em; 
    margin-bottom: 2em; 
} 
  
.img1{ 
    background-image: url(image-url); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 
  
.img2{ 
    background-image: URL(image-url); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    left: 50%; 
    background-attachment: fixed; 
    border-top: solid red 5px; 
    border-left: solid red 5px; 
}

JavaScript Code: In the following, we write code for

Detection of mouse movement for movement of images.
Use of different keyboard keys in event listeners for vertical and horizontal movement.

document.querySelector('css_selector') 
=> returns the first element that matches with specified CSS selector.

Guide for the vertical and horizontal movement

Default horizontal movement of the slider.
Vertical movement is active when the user presses the (v) key once.
Horizontal movement is active again when the user presses the (h) key once.

Note: The v and h are only valid in a small case.

The following is the content for “index.js” file used in the above HTML code.

index.js

// calling all of the Html classes 
const img2 = document.querySelector('.img2') 
  
// horizontal movement 
window.addEventListener('keydown',(e)=>{ 
    if(e.key == 'h'){ 
        window.addEventListener('mousemove',(e)=>{ 
            img2.style.left = e.clientX +'px'
            img2.style.top = 0 +'px'
        }) 
    } 
}) 
  
// vertical movement 
window.addEventListener('keydown',(e)=>{ 
    if(e.key == 'v'){ 
        window.addEventListener('mousemove',(e)=>{ 
            img2.style.left = 0 +'px'
            img2.style.top = e.clientY +'px'
        }) 
    } 
}) 
  
// default movement of slider which is horizontal movement 
window.addEventListener('mousemove',(e)=>{ 
    img2.style.left = e.clientX + 'px'
    img2.scroll.top = 0 + 'px'
})