jonathanphz
9/23/2016 - 8:17 PM

Div getting wider on scroll

Div getting wider on scroll

body {
  height: 1000px;
}

.container {
  margin-top: 450px;
  position: relative;
}

#expand {
  background: tomato;
  min-height: 400px;
  min-width: 20%;
  position: absolute;
  will-change: width;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
var expandDiv = document.getElementById("expand");
var speed = 5;

function expanding() {
  var scrolltop = window.pageYOffset; // get number of pixels document has scrolled vertically
  var scrollAndSpeed = (scrolltop / speed);
  //expandDiv.style.transform = "scale3d( " + Math.min(Math.max(scrollAndSpeed, 1), 3) + ",1)";
  expandDiv.style.width = Math.min(Math.max(scrollAndSpeed, 20), 95) + "%";

}

window.addEventListener('scroll', function() { // on page scroll
  requestAnimationFrame(expanding); // call parallaxing()
}, false);
<div class="container">
  <div id="expand"></div
</div>

Div getting wider on scroll

Div or section getting wider as you scroll down

A Pen by Jonathan on CodePen.

License.