How to Zoom an Image on Scroll using JavaScript?

Last Updated : 30 Jul, 2024

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 content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>
    Geeks for Geeks
  </title>
  <link href="style.css" rel="stylesheet" />
  <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>
</head>

<body>
  <div id="image-container">
    <img alt="Geeks for Geeks"
      	src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230405173803/gfg3-300x300.png" />
  </div>
  <script src="script.js">
  </script>
</body>

</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) {
    // Zoom in or out based on the scroll direction
    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;

    // Limit the zoom level to the minimum and maximum
    // values
    if (newZoom < minZoom || newZoom > maxZoom) {
        return;
    }

    currentZoom = newZoom;

    // Update the CSS transform of the image to scale it
    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.

How to zoom in an image using scale3d() function in CSS ?

nishth7hs8

Improve

Article Tags :

How to Zoom an Image on Scroll using JavaScript?

Conclusion:

Similar Reads

Thank You!

What kind of Experience do you want to share?