JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="fill"></div>

<div class="fill"></div>

<div class="image">
	<img src="//fillmurray.com/800/540" />
</div>

<div class="fill"></div>

<div class="fill"></div>

<div class="fill"></div>

<div class="image">
	<img src="//fillmurray.com/1200/810" />
</div>

<div class="fill"></div>

<div class="fill"></div>

<div class="image">
	<img src="//fillmurray.com/816/551" />
</div>

<div class="fill"></div>

<div class="image">
	<img src="//fillmurray.com/832/562" />
</div>

<div class="fill"></div>

<div class="fill"></div>

<div class="fill"></div>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	padding: 10px;
	perspective-origin: 50vw 50vh;
	perspective: 300px;
	background-color: #CCC;
}

body * + * {
	margin-top: 10px;
	outline: 10px solid #CCC;
}

.fill {
	position: relative;
	background-color: #FFF;
	min-height: 200px;
	z-index: 1;
}

.image {
	position: relative;
	z-index: 0;
}
.image:after {
	content: "";
	display: block;
	padding-bottom: 56.25%;
}

.image img {
	position: absolute;
	top: -10%;
	left: 0;
	width: 100%;
	height: 120%;
	transform: translate3d(0, 0, -60px) scale(1.2);
	transform-origin: 50% 50%;
	object-fit: cover;
}

JavaScript

var body = document.body;

window.addEventListener("scroll", function () {
	var scrollY = window.scrollY;
	var clientHeight = document.documentElement.clientHeight;
	body.style.perspectiveOrigin = "50% " + ((clientHeight / 2) + scrollY) + "px";
});