DEV Community

Cover image for Zoom Image Point With Mouse Wheel
Stackfindover
Stackfindover

Posted on • Edited on

8 3

Zoom Image Point With Mouse Wheel

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:

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (4)

Collapse
 
eggersa profile image
eggsa

Whats the license of this example source code? Can I use it like I want in my project or do some restrictions apply?

Collapse
 
stackfindover profile image
Stackfindover

its open source you can use it feel free without any restriction.

Collapse
 
lakshitpaliwal profile image
Lakshit Paliwal

this is Awsome But is should have Max Zoom and Min Zoom, that it cannot zoom-in and zoom-out at a certain point

Collapse
 
hangnhatcu profile image
hangnhatcu

Good, very good! Thank
i used it, many thanks!
demo: phuquoczone.com/giapha1/timkiem.php

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay