Q:

section scroll zoom animation

I am looking for a little direction, I seen this effect on a few sites and have been trying to figure out how to accomplish this.
Example of what I am trying to do
I have tried using background but it wont work that way. Its like all the elements are fixed but stay in the view until the zoom and fade out.
I have searched everywhere and cannot find anything in jQuery or JavaScript. 
I am noit even sure what it is called.
My biggest question is how does it look like the section is fixed but its actually not?

$(window).scroll(function() {
 var scroll = $(window).scrollTop();
 
 $(".zoom img").css({
  transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')'
 });
});
body{
   margin: 0;
}
 
.section{
 padding: 0;
 width: 100%;
 height: 100vh;
 position: relative;
 background: #f5f5f5;
 box-shadow: 0px -10px 60px rgba(0,0,0,0.25);
}

.zoom{
 overflow: hidden;
 padding-bottom: 55%;
}
.zoom img{
 position: fixed;
 top: 0%;
 left: 50%;
 transform: translateX(-50%); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="zoom">
 <img src="https://newevolutiondesigns.com/images/freebies/dog-wallpaper-12.jpg">
</section>
<section class="section">
 <h1>Section Two</h1>
</section>
 
<section class="section">
 <h1>Section Three</h1>
</section> 

A:

SO the first section ( with the image ) should be 100% viewport height, right ? So i added class section to the zoom section also.
Then in the script, you need to make that translate3d while the scrollTop is smaller that 100% window height. Because when scroll>$(window).height() that means you've reached the second section. ( because the zoom section height = window height ) 
See snippet below. From here it is easy to style whatever else you need

$(window).scroll(function() {
  var scroll = $(window).scrollTop()

  if (scroll < $(window).height()) {
    $(".zoom img").css({
      transform: 'translate3d(-50%, -' + (scroll / 100) + '%, 0) scale(' + (100 + scroll / 5) / 100 + ')'
    });
  }
});
body {
  margin: 0;
}

.section {
  padding: 0;
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f5f5f5;
  box-shadow: 0px -10px 60px rgba(0, 0, 0, 0.25);
}

.zoom {
  overflow: hidden;
  padding-bottom: 55%;
}

.zoom img {
  position: fixed;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="zoom section">
  <img src="https://newevolutiondesigns.com/images/freebies/dog-wallpaper-12.jpg">
</section>
<section class="section">
  <h1>Section Two</h1>
</section>

<section class="section">
  <h1>Section Three</h1>
</section>

