CSS zoom background image on scroll | Image zoom on page scroll

Sign Up For Fiverr And Get 20% Off Your First Order:

ADD JQUERY

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

HTML

<div class="zoom">
    <img src="https://i.postimg.cc/cCkd6pXx/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>

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;
  font-size: 40px;
}
.main-text p {
  font-size: 25px;
  font-family: roboto;
  line-height: 35px;
}

JQUERY

$(window).scroll(function(){
        var scroll = $(window).scrollTop();
        $(".zoom img").css({
            width: (100 + scroll/5) + "%"
        })
    })