Vertical and horizontal center, change width on scroll

index.html

<div class="container">
	<div id="lightbox">
				<img src="http://placehold.it/140/8BC34A/ffffff">
				<img src="http://placehold.it/140/3F51B5/ffffff">
				<img src="http://placehold.it/140/E91E63/ffffff">
				<img src="http://placehold.it/140/00BCD4/ffffff">
				<img src="http://placehold.it/140/FF5722/ffffff">
				<img src="http://placehold.it/140/9C27B0/ffffff">
</div>
</div>

script.js

$(function() {
		var lightbox = $('#lightbox');
		var initialWidth = 800;
		var finalWidth = initialWidth / 3;
		var diffWidth = initialWidth - finalWidth;

		$(window).scroll(function() {
				var scrollFromTop = $(window).scrollTop();
				var newSize = 800 - (diffWidth * (scrollFromTop / 2000));
				console.log(lightbox.width());
				lightbox.css({
						width: newSize,
						"marginTop": scrollFromTop + "px"
				});
		});

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.container {
		height: 2000px;
		overflow:hidden;
}

#lightbox {
  	position:relative;
		margin: 0 auto;
		height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
		width: 800px;
		background-color:#e4e4e4;
}

Vertical and horizontal center, change width on scroll.markdown

Vertical and horizontal center, change width on scroll

A Pen by Rachel Cantor on CodePen.

License.