Zoom header image on scroll

by ashleycam3ron

HTML

<div id="page">
  <header>
    <div class="bg" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/1024px-House_Sparrow_mar08.jpg');"></div>
  </header>
  <section class="content">
    <h1>Ipse eorum</h1>
    <p>Ipse eorum opinionibus accedo, qui Germaniae...</p>
    <p>Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania...</p>
  </section>
</div>

CSS

html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    #page {
      height: 1200px;
    }
    
    header {
      position: relative;
      height: 200px;
      width: 100%;
    }
    
    .bg {
      background: center no-repeat;
      background-size: cover;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
    }

JavaScript

jQuery(document).ready(function ($) {
	$(window).scroll(function(){
	    var $maxScroll=300;
	    var $maxScale=1.2;
	    var $x=$(window).scrollTop()/100+1;
	    if($(window).scrollTop()>$maxScroll) $x=$maxScale;
	//    $('#first .background').css({transform: 'scale('+$x+','+$x+')'});
	        $('.bg').css({transform: 'scale('+$x+','+$x+')'});
	});
});