Night Train
“Far things slow, near things fast.”
- Type
- Experiment
- Topic
- Parallax, explained
- Built with
- HTML, CSS scroll-driven animations and a little JavaScript
- Role
- Art direction, design and development
An art-directed night train from Brussels to Berlin that explains how parallax works. Scroll and the train moves; far layers drift, near ones rush past. Press E to pull the layers apart and see the trick.
Challenge
Parallax is everywhere on the web, and most explanations stop at “the background moves slower.” I wanted a page where you feel the idea before you read it, and where the code behind it is short enough to understand in one sitting.
Approach
The page is a night train from Bruxelles-Midi to Berlin Gesundbrunnen, seen through the window. Every stop is a scene built from layers, from the sky down to the grass beside the track, and each layer gets one number: its speed. Scrolling drives the train, so the sky barely moves, the tree lines drift and the masts rush past. Press E, or the Layers button, and each scene tilts into 3D and pulls apart, with every layer labelled with its speed. The whole effect lives in one CSS file using scroll-driven animations, with a small script as a fallback for browsers that don’t support them yet.
Result
A cinematic scroll piece that doubles as a lesson: depth is just speed. The photography is graded into one palette of sodium orange and night blue, mixed with my own Berlin photos and generated silhouettes for skylines, catenary masts and platforms. Rain on the glass, a reflection and film grain sit on top, so it feels like looking out of a real compartment. It ends in Berlin, with a short reel of the morning after.