<html>
<body>
<style>
body {
height: 2000px;
}
#container {
width: 200px;
height: 200px;
border: 2px solid;
position: fixed;
}
#box {
width: 100%;
height: 100%;
background: red;
transform-origin: 0 0;
}
</style>
<div id="container"><div id="box"></div></div>
<script>
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('+(1-scrolled)+')';
box.style.WebkitTransform = transformValue;
box.style.MozTransform = transformValue;
box.style.OTransform = transformValue;
box.style.transform = transformValue;
}, false);
}, false);
</script>
</body>
</html>
|
