DEV Community

loading...
Cover image for Image Zoom Animation with Scroll Wheel

Image Zoom Animation with Scroll Wheel

stackfindover profile image Stackfindover ・1 min read

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

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

Image Zoom Animation Output:

Image Zoom Animation Codepen Output:

We will update soon :)

Discussion (0)

pic
Editor guide