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="image-container">
        <div class="zoom main">
            <img src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="main-image">
        </div>

        <div id="content-anchor"></div>
        <div id="image-content"></div>
    </div>

    <div class="filler">

    </div>

    <div class="main-text">

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        //  zooming in and out
        $(window).scroll(function() {
            let scroll = $(window).scrollTop()
            if (scroll < 2800) {
                $(".zoom img").css({
                    width: (100 - scroll / 40) + "%"
                })
            }
        })

        $(window).scroll(function() {
            let windowTop = $(window).scrollTop();
            if (windowTop < 800) {
                $('image-content').addClass('scrolledDown');
                $('image-content').removeClass('scrolledUp');
            } else {
                $('image-content').addClass('scrolledUp');
                $('image-content').removeClass('scrolledDown')
            }
        })
    </script>

</body>
</html>

CSS

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

.main-image {
    width: 100%;
    position: fixed;
    left: 50%;
    transform: translate(-50%) scale(500%);
}

.filler {
    height: 400vh;
}

.main-text {
    left: -14px;
    width: 99.3vw;
    height: 4000px;
    text-align: center;
    background-color: red;
    position: relative;
}

#image-content::before {
    white-space: pre;
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: Impact;
    font-size: 55px;
    font-weight: 550;
    color: white;
    z-index: 4;
    opacity: 1;
    position: fixed;
}

#image-content.scrolledDown::before {
    opacity: 1;
    content: 'ABC';
}

#image-content.scrolledUp::before {
    opacity: 1;
    content: "DEF";
}