I recreated the parallax header on the Firewatch website in CSS. It was originally meant as a daft experiment but it seems to have blown-up.
I've base-64 encoded the images to avoid hot-linking to the Firewatch site.
A Pen by Sam Beckham on CodePen.
Dionyso7
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
| <div id="app"> | |
| <div :class="['bg', bg]"> | |
| <header> | |
| <nav> | |
| <ul> | |
| <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li> | |
| <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li> | |
| <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li> | |
| </ul> | |
| </nav> |
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
| <div id="app"> | |
| <div :class="['bg', bg]"> | |
| <header> | |
| <nav> | |
| <ul> | |
| <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li> | |
| <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li> | |
| <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li> | |
| </ul> | |
| </nav> |
Dionyso7
/ firewatch-parallax-in-css.markdown
Created
October 3, 2025 14:13
Firewatch Parallax in CSS
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
| <div id="app"> | |
| <div :class="['bg', bg]"> | |
| <header> | |
| <nav> | |
| <ul> | |
| <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li> | |
| <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li> | |
| <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li> | |
| </ul> | |
| </nav> |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>ROSA- Restaurant</title> | |
| <meta name="description" content="ROSA is an enchanting Parallax Restaurant WordPress Theme that allows you to tell your story in an enjoyable way, perfect for restaurants or coffee shops."> | |
| <meta name="viewport" content="width = device-width, initial-scale = 1, shrink-to-fit = no"> |
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
| <div id="app"> | |
| <div :class="['bg', bg]"> | |
| <header> | |
| <nav> | |
| <ul> | |
| <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li> | |
| <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li> | |
| <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li> | |
| </ul> | |
| </nav> |
Dionyso7
/ index.html
Created
October 3, 2025 16:29
[threejs/gsap] ❍ Explorations with GSAP and Scroll Trigger / 1004
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
| <div class="content"> | |
| <section class="section"> | |
| <div class="section-inner"> | |
| <h1 class="title">Beyond<br>Time</h1> | |
| <p class="description">The universe breathes in patterns we barely comprehend, revealing itself through silence and the spaces between moments.</p> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <div class="section-inner"> | |
| <h1 class="title">Cosmic<br>Awareness</h1> |
Dionyso7
/ gsap-lenis-layout-explorations-with-gsap-lenis-and-scrolltrigger-n-1.markdown
Created
October 4, 2025 12:20
[gsap/lenis] ❍ Layout Explorations with Gsap, Lenis and ScrollTrigger N°1
A Pen by Filip Zrnzevic on CodePen.
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
| <div id="app"> | |
| <div :class="['bg', bg]"> | |
| <header> | |
| <nav> | |
| <ul> | |
| <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li> | |
| <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li> | |
| <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li> | |
| </ul> | |
| </nav> |