A one-page website for a company that develops manned underwater vehicles, featuring a dynamic simulation of diving during scrolling.
Main task: Technical presentation of services and characteristics of underwater vehicles, engaging users through an interactive visual experience of diving to depths of up to 10,935 meters.
What has been implemented:
- Dynamic background color change and vignetting effect based on scroll position (simulation of pressure and lighting).
- Real-time generation of visual effects of water thickness and particles using the Canvas API.
- Interactive HUD interface (Head-Up Display) with a fixed current depth counter.
- Adaptive grid/flex layout of information blocks (vessel specifications, scientific missions).
- Animations for gradual content appearance (reveal) and continuous text scrolling (ticker).
- Custom startup screen loader with a progress bar for "preparing for dive."
Technologies: HTML5, CSS3, Vanilla JavaScript, Canvas API
Main task: Technical presentation of services and characteristics of underwater vehicles, engaging users through an interactive visual experience of diving to depths of up to 10,935 meters.
What has been implemented:
- Dynamic background color change and vignetting effect based on scroll position (simulation of pressure and lighting).
- Real-time generation of visual effects of water thickness and particles using the Canvas API.
- Interactive HUD interface (Head-Up Display) with a fixed current depth counter.
- Adaptive grid/flex layout of information blocks (vessel specifications, scientific missions).
- Animations for gradual content appearance (reveal) and continuous text scrolling (ticker).
- Custom startup screen loader with a progress bar for "preparing for dive."
Technologies: HTML5, CSS3, Vanilla JavaScript, Canvas API