Hello guys today we will learn image comparison slider using Html CSS & Javascript
First we need to create three files index.html,Style.css and an JavaScript custom.js file then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Comparison Slider</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="custom.js"></script> </head> <body> <div class="container"> <div class="img1"></div> <div class="img2"></div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.img1, .img2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.img1 {
background-image: url("img1.jpg");
}
.img2 {
background-image: url("img2.jpg");
left: 50%;
background-attachment: fixed;
border-left: 2px solid #222;
}
Step:3
Then we need to add below code inside custom.js
$(document).ready(function(){
const img2 = document.querySelector(".img2");
window.addEventListener("mousemove", (e)=> {
img2.style.left = e.clientX + "px";
})
});