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/450" />
</div>

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

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

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

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

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

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

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

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

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

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	padding: 10px;
	perspective-origin: 50vw 50vh;
	perspective: 300px;
}

body * + * {
	margin-top: 10px;
}

.fill {
	background-color: #ccc;
	min-height: 200px;
}

.image {
	width: 100%;
	overflow: hidden;
}

.image img {
	width: 100%;
	height: auto;
	transform: translate3d(0, 0, -150px) scale(2.5);
	transform-origin: 50% 50%;
}

JavaScript

var body = document.body;

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