DEV Community

loading...
Cover image for Zoom Image Point With Mouse Wheel

Zoom Image Point With Mouse Wheel

stackfindover profile image Stackfindover ・2 min read

Hello guys, in this tutorial we will create Zoom Image Point With Mouse Wheel using JavaScript

Zoom Image Point With Mouse Wheel Common Query

  1. image zoom in zoom out animation CSS
  2. image zoom out animation CSS
  3. CSS image zoom effect animation
  4. css3 image zoom animation
  5. Zoom Image Point With Mouse Wheel

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to add Zoom Image Point With Mouse Wheel using JavaScript

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>On point zoom with Scrollwheel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="zoom_outer">
      <div id="zoom">
        <img src="map.jpg" alt="zoom">
      </div>
    </div>
    <script>
      var scale = 1,
        panning = false,
        pointX = 0,
        pointY = 0,
        start = { x: 0, y: 0 },
        zoom = document.getElementById("zoom");

      function setTransform() {
        zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
      }

      zoom.onmousedown = function (e) {
        e.preventDefault();
        start = { x: e.clientX - pointX, y: e.clientY - pointY };
        panning = true;
      }

      zoom.onmouseup = function (e) {
        panning = false;
      }

      zoom.onmousemove = function (e) {
        e.preventDefault();
        if (!panning) {
          return;
        }
        pointX = (e.clientX - start.x);
        pointY = (e.clientY - start.y);
        setTransform();
      }

      zoom.onwheel = function (e) {
        e.preventDefault();
        var xs = (e.clientX - pointX) / scale,
          ys = (e.clientY - pointY) / scale,
          delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
        (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
        pointX = e.clientX - xs * scale;
        pointY = e.clientY - ys * scale;

        setTransform();
      }
    </script>
  </body>
  </html>
Enter fullscreen mode Exit fullscreen mode

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  outline: 0;
  overflow: hidden;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#zoom {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
}
div#zoom > img {
  width: 100%;
  height: auto;
}
Enter fullscreen mode Exit fullscreen mode

Zoom Image Point With Mouse Wheel Video Output:

Zoom Image Point With Mouse Wheel Codepen Output:

We will update soon:)

Discussion (0)

pic
Editor guide