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.
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.
You May Also Like:
- Bootstrap 5 Landing Page Website
- Profile Card with JavaScript Modal popup
- Responsive User Profile Card Design
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.
<!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>
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;
}
For the Original Code: Click Here
Top comments (0)