Прокрутка с эффектом увеличения с помощью JS

<div id="environment">
  <div id="content">
  <section id="first"></section>
  <section id="second"></section>
  <section id="third"></section>
  <section id="fourth"></section>
  </div>
  </div>

#scroll-proxy { height: 4000px; }
#content section {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100%;
  background-color: transparent;
  background-position: center bottom;
  background-repeat: no-repeat;
}
#environment {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}
#content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#first {
  background-image: url(landscape1.svg);
  -webkit-transform: translate3d( 0, 0, -11500px) scale(16);
  -moz-transform: translate3d( 0, 0, -11500px) scale(16);
  -ms-transform: translate3d( 0, 0, -11500px) scale(16);
  -o-transform: translate3d( 0, 0, -11500px) scale(16);
  transform: translate3d( 0, 0, -11500px) scale(16);
}
#second {
  background-image: url(landscape2.svg);
  -webkit-transform: translate3d( 0, 0, -24000px ) scale(32);
  -moz-transform: translate3d( 0, 0, -24000px ) scale(32);
  -ms-transform: translate3d( 0, 0, -24000px ) scale(32);
  -o-transform: translate3d( 0, 0, -24000px ) scale(32);
  transform: translate3d( 0, 0, -24000px ) scale(32);
}
#third {
  background-image: url(landscape3.svg);
  -webkit-transform: translate3d( 0, 0, -48000px ) scale(64);
  -moz-transform: translate3d( 0, 0, -48000px ) scale(64);
  -ms-transform: translate3d( 0, 0, -48000px ) scale(64);
  -o-transform: translate3d( 0, 0, -48000px ) scale(64);
  transform: translate3d( 0, 0, -48000px ) scale(64);
}
#fourth {
  background-image: url(landscape4.svg);
  -webkit-transform: translate3d( 0, 0, -64000px ) scale(128);
  -moz-transform: translate3d( 0, 0, -64000px ) scale(128);
  -ms-transform: translate3d( 0, 0, -64000px ) scale(128);
  -o-transform: translate3d( 0, 0, -64000px ) scale(128);
  transform: translate3d( 0, 0, -64000px ) scale(128);
}

(function( window, document, $, Modernizr ){

  var transformProp = Modernizr.prefixed('transform');
   
  // Конструктор мультиизображений
  function Multiplane() {
  // свойства
  this.scrolled = 0;
  this.distance3d = 6000;
   
  // JQuery кэширования объектов
  this.$window = $(window);
  this.$document = $(document);
   
  // связываем конструктор с событием window.scroll  
  window.addEventListener( 'scroll', this, false);
  }
   
  // like obj.addEventListener( eventName, this, false )
  Multiplane.prototype.handleEvent = function( event ) {
  if ( this[event.type] ) {
  this[event.type](event);
  }
  };
   
  Multiplane.prototype.scroll = function( event ) {
  // нормализовать значение прокрутки от 0 до 1
  this.scrolled = this.$window.scrollTop() / ( this.$document.height() - this.$window.height() );
  this.transformScroll( this.scrolled );
  };

  // применять преобразование к контент на основе позиции прокрутки
  Multiplane.prototype.transformScroll = function( scroll ) {
  var style = {};
  style[ transformProp ] = 'translate3d( 0, 0,' + ( scroll * this.distance3d ) + 'px )';
  this.$content.css( style );
  };
   
  $(function(){
  var env = new Multiplane();
  env.$content = $('#content');
  });

})( window, window.document, window.jQuery, window.Modernizr );