Parallax Starfield
Interactive Canvas Animation
How the Parallax Effect Works
This starfield creates a sense of depth through a parallax scrolling effect. Move your mouse around the screen to see the stars shift at different rates based on their distance from you.
Five Depth Layers
The farthest layer contains the smallest stars (0.5-1px) with no movement. These stars remain stationary, creating a distant backdrop at 30% opacity.
Slightly larger stars (0.5-2px) with 10px maximum movement. These stars move very subtly in response to your cursor at 40% opacity.
Medium-sized stars (0.5-3px) with 20px maximum movement. This layer provides the transition between distant and nearby stars at 50% opacity.
Larger stars (0.5-4px) with 30px maximum movement. These stars show noticeable parallax motion as you move your cursor, displayed at 60% opacity.
The largest stars (0.5-5px) with 40px maximum movement. These closest stars move the most dramatically, creating a strong sense of depth at 70% opacity.
Technical Implementation
Stars move opposite to your cursor movement. When you move your cursor left, the stars shift right, creating a realistic parallax effect that mimics looking through a window.
Each star's movement is clamped to its maximum range, ensuring smooth motion without stars jumping around unpredictably.
Stars subtly twinkle using sine wave calculations, with each star having its own unique twinkling speed and phase offset.
Built with HTML5 Canvas and JavaScript, the starfield dynamically renders at 60fps using requestAnimationFrame for smooth animation.
The starfield automatically adapts to your screen size, with star density calculated based on viewport dimensions.
Future Improvements
I don't like how when your mouse exits the window in one place and enters in another, the stars suddenly jump as if startled by the presence of the cursor.
I'd like to address this by having the program lock the star position when the cursor leaves the window and recalculate their movements from that position when the cursor re-enters and the move in relation to the cursor's new position. This would necessitate the creation of additional stars off the edge of the window when this happens, so that they can move into the window.