DEV Community

Cover image for Zoom an Image on page scroll using JavaScript
Divinector
Divinector

Posted on

1

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.

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:

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>

Enter fullscreen mode Exit fullscreen mode
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;
}

Enter fullscreen mode Exit fullscreen mode

For the Original Code: Click Here

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay