ApeOut 3D scroll spacer

codeswing.json

{
  "scripts": [],
  "styles": [],
  "themePreview": false
}

index.html

<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>

<ape-out>
	<div class="left">
		<span class="front"></span>
		<span class="top">out</span>
		<span class="side"></span>
		<span class="bottom">no</span>
	</div>

	<div class="right">
		<span class="front"></span>
		<span class="top">keep</span>
		<span class="side"></span>
		<span class="bottom">entry</span>
	</div>
</ape-out>

<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>
<p>Congue nam porttitor ac libero neque vivamus morbi feugiat, facilisis habitant accumsan amet eleifend lacus enim lorem commodo, nisl fames blandit fermentum tempor netus nisi. Porta quam accumsan faucibus volutpat enim nam donec, sem ut vivamus ac facilisis augue, orci sociosqu cubilia inceptos molestie neque cum, erat aenean fringilla velit praesent. Turpis congue duis tempus lacus aliquam platea eu auctor malesuada ridiculus, commodo porta nisl donec magna fringilla praesent cursus. Ante nec enim ad commodo dictum massa ullamcorper, fermentum potenti duis per nulla magna, nunc erat leo himenaeos ut vel. Purus curabitur at sociis viverra eget non pellentesque id pretium, vehicula aliquet quis porta ultrices neque velit nascetur, per pulvinar risus habitant dui sagittis orci est. Condimentum inceptos lectus dui ante morbi quis magna tellus, venenatis vel ipsum ridiculus volutpat nunc accumsan.</p>

script.js

const target = document.querySelector('ape-out')
const coords = { start: 0, end: 0, delta: 0 }
let raf = null
onResize()
onScroll()
window.addEventListener('scroll', onScroll, {passive: true})
window.addEventListener('resize', onResize, {passive: true})

function onResize() {
	const {top, bottom} = target.getBoundingClientRect()
	const {scrollY, innerHeight} = window
	coords.start = top - (scrollY + innerHeight)
	coords.end = bottom - scrollY
	coords.delta = coords.start - coords.end
}

function onScroll() {
	if(!raf) {
		raf = requestAnimationFrame(onFrame)
	}
}

function onFrame() {
	raf = null
	const percent = 1 + (coords.end - window.scrollY) / coords.delta
	const clamp = Math.max(0, Math.min(1, percent))
	target.style.setProperty('--percent', `${(clamp - 0.5) * 100}vh`)
}

style.scss

body {
	margin: 0;
	background-color: #EAE2B7;
}

ape-out {
	--percent: -50vh; // initial value, will be set by JS immediately
	display: block;
	position: relative;
	width: 100%;
	height: 100px;
	
	transform-style: preserve-3d;
	perspective: 1000px;

	div {
		$adjust: 100px; // so we don't see the "off screen" corners of the walls

		position: absolute;
		top: 0;
		backface-visibility: visible;
		transform-style: preserve-3d;
		perspective: 1000px;
		height: 100%;
		width: calc(40% + #{$adjust});

		// translateZ the whole wall so it feels more level with the content
		transform: translateZ(-100px); 
		transform-origin: center center center;

		&.right {
			right: -$adjust;
			perspective-origin: -40vw var(--percent);
		}

		&.left {
			left: -$adjust;
			// somehow perspective-origin X isn't mirrored left/right?! (I thought if it was -40vw for .right, it would be 40vw for .left)
			perspective-origin: 97vw var(--percent);
		}
	}

	span {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: visible;

		// text styles
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: Impact;
		text-transform: uppercase;
		color: white;
		font-size: 3em;
		text-shadow: 0 0 .1em rgba(255,255,255,.7);
	}

	.front {
		transform: translateZ(50px);
		background-color:#003049;
	}

	.top {
		transform: rotateY(.5turn) rotateX(.25turn) translateZ(50px);
		background-color:#D62828;
		text-align: left;
	}

	.bottom {
		transform: rotateX(-.25turn) translateZ(50px);
		background-color:#FCBF49;
	}

	.side {
		width: 100px;
		background-color:#F77F00;
	}

	div.right .side {
		left: 0;
		transform-origin: center center 0px;
		transform: rotateY(-.25turn) translateZ(50px);
	}

	div.left .side {
		right: 0;
		transform-origin: center center 100px;
		// there's probably some more elegant math to do .right / .left
		transform: rotateY(-.25turn) translateZ(50px) translateX(-100px);
	}
}