Add animation, show image from only one row at a time.

I have some images as shown in the layout here.

https://ibb.co/xzGxv4Z

Currently all images are showing at once. What I want instead is to show only single row of images at a time, I would like to have an animation, when user scolls, then show another row and hide previous one, similariy next scrolling show next row. In case if user scroll upwards, we need to show images from previous row. Like that. Can't get a clue on how to achieve it. Here, is my current code.

.parallax-window {
    min-height: 400px;
    background: transparent;
}

.service-box-container{
    display: grid;
    grid-template-columns: repeat(6, 2fr);
    gap: 15px;
}

.service-box-container .service-box{
      grid-column: span 2;
}
.service-box-container .service-box:nth-child(5n+4), .service-box-container .service-box:nth-child(5n+5) {
    grid-column: span 3;
}

.service-box-container img{
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: 460px;
    border-radius: 20px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<div class="service-box-container parallax-window" data-parallax="scroll" data-image-src="https://www.fillmurray.com/640/360">

  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
</div>
<script>
    $(document).ready(function(){
        $('.parallax-window').parallax({});
    });
</script>

#PS: I have used parallax js as well, so I would love to keep those parallax effects as well.

Here is the https://jsfiddle.net/sj7q50ap/