How to Zoom an Image on Scroll using JavaScript ?
Last Updated :
05 Jun, 2023
Zoom in and out of images is a common feature in web development. One way to achieve this effect is by using JavaScript to zoom in and out of an image when the user scrolls. In this article, we will go through the steps needed to create a zoomable image using JavaScript.
Step 1: HTML Markup: The first step is to create the HTML markup for the image. We will create a container div that will hold the image and add some CSS styles to center the image and set its maximum width to 100%.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Geeks for Geeks</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
#image-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
max-width: 100%;
}
#image-container img:hover {
cursor: zoom-in;
}
</style>
<body>
<div id="image-container">
<img src=
alt="Geeks for Geeks">
</div>
</body>
<script src="script.js"></script>
</html>
|
Step 2: JavaScript Code: Next, we will write the JavaScript code that will handle the zooming in and out of the image. We will start by defining some variables to keep track of the current zoom level, the minimum and maximum zoom levels, and the step size of each zoom level.
Javascript
let currentZoom = 1;
let minZoom = 1;
let maxZoom = 3;
let stepSize = 0.1;
|
We will then add an event listener to the container div that listens for the ‘wheel’ event. This event is fired when the user scrolls with their mouse or trackpad.
Javascript
let container = document.getElementById('image-container');
container.addEventListener('wheel', function (event) {
let direction = event.deltaY > 0 ? -1 : 1;
zoomImage(direction);
});
|
The zoomImage function will handle the actual zooming in and out of the image. It will update the currentZoom variable based on the scroll direction and limit the zoom level to the minimum and maximum values.
Javascript
function zoomImage(direction) {
let newZoom = currentZoom + direction * stepSize;
if (newZoom < minZoom || newZoom > maxZoom) {
return;
}
currentZoom = newZoom;
let image = document.querySelector('#image-container img');
image.style.transform = 'scale(' + currentZoom + ')';
}
|
Step 3: Testing and Refinement: With the HTML and JavaScript code in place, we can test the zoomable image by scrolling with the mouse or trackpad. We may need to adjust the stepSize, minZoom, and maxZoom variables to get the desired zooming behavior.
Javascript
let currentZoom = 1;
let minZoom = 1;
let maxZoom = 5;
let stepSize = 0.05;
|
We may also want to add some additional CSS styles to improve the user experience, such as setting the cursor property to zoom-in when the image is hovered over.
CSS
#image-container img:hover {
cursor: zoom-in;
}
|
Output:
Conclusion: In this article, we have learned how to create a zoomable image using JavaScript. By adding an event listener to the container div and updating the CSS transform of the image, we can zoom in and out of the image when the user scrolls. With some testing and refinement, we can create a smooth and intuitive zooming effect that enhances the user experience.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...