Last active
August 28, 2021 09:47
-
-
Save Sheraff/e4bc1594c1047b941e057c3ee25ccf54 to your computer and use it in GitHub Desktop.
ApeOut 3D scroll spacer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "scripts": [], | |
| "styles": [], | |
| "themePreview": false | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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`) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment