Scroll / React + Web APIs
Depth Parallax
Move foreground and background layers at different speeds.
Open experiment[ EXP-001 / DEMONSTRATION ]
Camera Zoom Navigation.
Move between spatial anchors within one continuous environment.
- Category
- Scroll
- Collection
- Demonstration study
- Stack
- React / Web APIs / CSS
- Chronology
- Undated / exploration
EXP-001 / LIVE PREVIEW
Loading experiment…
REDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
01 / Overview
Use a continuous scene to give navigation a sense of place. The tower stays recognizable while the camera approaches a spatial anchor.
02 / How it works
A Web Animations timeline interpolates image scale and horizontal translation. Duration controls the approach; the scene returns to its original framing at the end.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (cameraZoom), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Zoom scale | Number | 1–3× | 1.8× |
| Duration | Number | 0.2–3s | 1.2s |
| Horizontal pan | Number | -25–25% | 12% |
05 / Usage & accessibility
A working demonstration created for this archive, not a claim of historical client work. Activate manually. Reduced motion uses a static result. Animation handles and listeners are released on unmount.
Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.
Related experiments.
Scroll / React + Web APIs
Reading Progress
Fill a progress rail as the preview scrolls.
Open experiment