Zoom an Image on page scroll using JavaScript

Zoom an Image on page scroll using javascript is a web design trick by which an image changes its size or scale in response to the user's scrolling action on a web page. This interactive feature built with HTML CSS and a bit of js can increase user engagement and create a dynamic user experience. Today we will share with you a simple snippet called the Image Zoom effect on Page Scroll. The details are given in the video tutorial below. Have a look at the video and subscribe to our channel if you like our videos.

Video Tutorial:

We hope you have seen the video. When a website visitor scrolls down or up on the website, the banner image zooms in or out as the visitor scrolls down or up. The main purpose of giving this effect is to reveal more details or provide a visual impact of an image. Besides, this effect can also be used for storytelling, emphasizing specific elements, adding visual flair to a website, etc.

The image that will be zoomed in this snippet was taken into a div called 'Zoom'. It can also be called a website banner image in this case. Below this div, we have taken another div called 'main-text' which contains some paragraph text and a header text. In CSS, the body element's margin and padding are first reset to zero. This is done to ensure a consistent layout across different browsers. After giving 100% width and 700px height to the div elements, the overflow property is set to hidden. This will ensure to prevent the content from overflowing. The position property is set to relative. After that. the position property of the image is set to absolute. This will allow the image element to be positioned within the div element. The text is then given a specific font, size, and line height. Finally, we provided a javascript code that adjusts the width of the image on the current scroll position of the window.

You May Also Like:

Zoom an Image on page scroll using javascript [ Source Code ]:

To create this image Zoom on page scroll project, you need to create HTML and CSS files. Add the external CSS file to the HTML. You can create a separate JS file for the JS code provided in the snippet. You can also put the JS code underneath the HTML file like we have. Then copy the code from the code box below and paste it into your project file. If you are facing any problems with the code, then download the code from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zoom image on scroll</title>
    <link href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="zoom"><img src="2.jpg"></div>

	<div class="main-text">
		<h2>Main Text</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

	</div>  



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            $(".zoom img").css({
                width: (100 + scroll / 5) + "%"
            })
        })
    </script>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
}
div {
	width: 100%;
	height: 700px;
	overflow: hidden;
	position: relative;
}
div img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
}
.main-text {
	text-align: center;
}
.main-text h2 {
	font-family: 'Merienda', cursive;
	font-size: 40px;
}
.main-text p {
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	line-height: 35px;
}

Hope today's code about Zoom Image on page scroll is working properly for you. Click on the Load More button on our homepage to get the remaining 150+ code snippets of our website. If you like our website content, please share our blog posts with others. Thanks for visiting the website.

DOWNLOAD CODE

Video Tutorial:

Zoom an Image on page scroll using javascript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Zoom an Image on page scroll using JavaScript

Video Tutorial:

Zoom an Image on page scroll using javascript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form