scroll / scale

by Adil Heybətov

HTML

<div id="container"><div id="box"></div></div>

CSS

body {
  height: 2000px;
}

#container {
  width: 200px;
  height: 200px;
  border: 2px solid;
  position: fixed;
}

#box {
  width: 100%;
  height: 100%;
  background: red;
}

JavaScript

window.addEventListener( 'load', function() {
  var box = document.getElementById('box'),
      docHeight = document.documentElement.offsetHeight;
  
  window.addEventListener( 'scroll', function() {
        // normalize scroll position as percentage
    var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
        transformValue = 'scale('+scrolled+')';

    box.style.WebkitTransform = transformValue;
    box.style.MozTransform = transformValue;
    box.style.OTransform = transformValue;
    box.style.transform = transformValue;
    
  }, false);
  
}, false);