Image Zoom Animation with Scroll Wheel

Hello guys, in this tutorial we will create Image Zoom Animation with Scrollwheel using JavaScript

Common Query

  • image zoom in zoom out animation CSS
  • image zoom out animation CSS
  • CSS image zoom effect animation
  • css3 image zoom animation
  • image hover zoom animation CSS

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to add Image Zoom Animation with Scroll 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>Zoom with Scrollwheel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="zoom_outer">
      <div class="zoom">
        <img src="zoom.jpg" alt="zoom">
      </div>
    </div>
    <script>
      const zoomElement = document.querySelector(".zoom");
      let zoom = 1;
      const ZOOM_SPEED = 0.1;

      document.addEventListener("wheel", function (e) {
        if (e.deltaY > 0) {
          zoomElement.style.transform = `scale(${(zoom -= ZOOM_SPEED)})`; 
        } else {
          zoomElement.style.transform = `scale(${(zoom += ZOOM_SPEED)})`;
        }
      });
    </script>
  </body>
</html>

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;
}
.zoom {
  height: 100vh;
  width: 100vw;
}
.zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Image Zoom Animation Output:

Leave a Comment