title: section scroll zoom animation
body: <p>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.</p>
  
  <p><a href="http://pentakill.leagueoflegends.com/en_US/" rel="nofollow noreferrer">Example of what I am trying to do</a></p>
  
  <p>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.</p>
  
  <p>I have searched everywhere and cannot find anything in jQuery or JavaScript. 
  I am noit even sure what it is called.</p>
  
  <p>My biggest question is how does it look like the section is fixed but its actually not?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
   var scroll = $(window).scrollTop();
   
   $(".zoom img").css({
    transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')'
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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%); 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section class="zoom"&gt;
   &lt;img src="https://newevolutiondesigns.com/images/freebies/dog-wallpaper-12.jpg"&gt;
  &lt;/section&gt;
  &lt;section class="section"&gt;
   &lt;h1&gt;Section Two&lt;/h1&gt;
  &lt;/section&gt;
   
  &lt;section class="section"&gt;
   &lt;h1&gt;Section Three&lt;/h1&gt;
  &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>