Foolish Developer

Menu

How to Zoom Image on Scroll using JavaScript

Complete Guide about web designing - Foolish Developer

Zoom Image on Scroll JavaScript

Scroll Zoom Effect You can easily create with JavaScript. When you scroll the wheel, the elements will zoom in and out.

Image zoom is a common web element that is used in many different places. Already using JavaScript I have created a kind of image zoom. However, in this tutorial, you will learn how to zoom the image by scrolling the wheel.

This type of Zoom Image on Scroll is used in the background of the webpage. Many web pages also use the Scroll Zoom Effect to zoom in on text or something instead of images.

Zoom Image on Scroll JavaScript

Images used in most places are created by zoom CSS. I have also kept the size of the image used here a little smaller than the webpage so that the animation can be better understood. Check out the preview below to learn how it works.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

As you can see, a box has been created on the page. Max-width of the image is 550px and has a border around it. You can use this image as a background image if you wish.

This type of scroll image zoom will undoubtedly make your web page more attractive. You will find all the information on how to make it in this tutorial.

How To Make Scroll Zoom Effect in JavaScript

 Now if you want to create it, quickly create HTML and CSS files. Below I have shown all the code step-by-step. If you have difficulty copying your step-by-step code and adding it to the project, you can download the code directly.

Step 1: Basic structure of image zoom

I have added the image using the following HTML. I have used only one line of HTML here. You can change this image to your liking.

<div class=”container”>
 <img src=”https://images8.alphacoders.com/110/1100143.jpg” alt=””>
</div>

Now using some CSS below I designed the web page. Here a blue background color is used on the web page.

* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  width: 100%;
  padding: 0;
  margin: 0;
  position: fixed;
  font-family: sans-serif;
  background: #0a415f;
  text-align: center;
}

Step 2: Design the image

Now I have designed some of the images. Basically, width and border have been added here.

.container img{
  max-width: 550px;
  border: 6px solid white;
}

Step 3: Activate Scroll Zoom with JavaScript

Now, this Scroll Zoom Effect has been activated by JavaScript. Very simple JavaScript is used here.

Below I have given all the code together. The expressions will help you to know which line has been used for which purpose.

const zoomScreen = document.querySelector(“.container”);
let zoom = 1;
const zoomingSpeed = 0.1;
document.addEventListener(“wheel”, (e)=> {
    if (e.deltaY > 0) {
        zoomScreen.style.transform = `scale(${(zoom += zoomingSpeed)})`;
    } else {
        zoomScreen.style.transform = `scale(${(zoom -= zoomingSpeed)})`;
    }
})

 Hopefully, you have learned from the above tutorial how to create a Zoom Image on Scroll. The background image zoom on scroll code created by JavaScript is in the button below.