JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="zoom.css">
</head>
<body>

<div class="zoom">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/50/Black_colour.jpg">
</div>
<div class="main-text">
    Hello World
</div>
<script src="zoom.js"></script>
<script src="lib/jquery-3.6.0.js"></script>
<script>
    $(window).scroll(function() {
        let scroll = $(window).scrollTop()
        if (scroll < 2800) {
            $(".zoom img").css({
                width: (100 - scroll / 40) + "%"
            })
        }
    })
</script>


</body>
</html>

CSS

div
{
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
}

div img
{
    width: 100%;
    position: fixed;
    left: 50%;
    transform: translate(-50%) scale(500%);
}

.show-text {
    position: absolute;
}

.main-text {
    color: red;
    height: 4000px;
    text-align: center;
}