Hello guys, in this tutorial we will create Image Zoom Animation with Scroll wheel 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 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>
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:
Image Zoom Animation Codepen Output:
Top comments (0)