At the outset, let's clarify that I am seeking a conceptual solution or approach rather than actual working code.
The Issue at Hand
I have been tasked with exploring a navigation concept for a timeline wherein you would walk down a road towards the horizon.
The image that sparked this idea is shown below:
The basic premise is that each yellow or red line represents a point in time. Clicking on one of them should make you progress down the road to that specific moment.
The final graphics may look quite different from this initial inspiration.
Current Thoughts and Approach
I have been contemplating various ways to create this animation. One idea is to divide the picture into four parts: the horizon, the road, and two sides.
Keeping the horizon stationary while moving the side elements toward the center as the road widens and moves downward could potentially simulate the effect of walking forward. Refer to the illustration below:
This method is straightforward, but it does raise some concerns, such as how to incorporate detail into the imagery as you progress. Perhaps swapping out images along the journey could address this issue, especially when covering great distances down the road all at once.
Seeking Assistance
What I need help with is a conceptual strategy for implementing something similar, not the exact solution. Code snippets would be appreciated as well.
- Is my current approach sound?
- Could there be a more efficient way to achieve this?
- Have I overlooked any crucial aspects?
- Are there any useful tools that can aid me in this endeavor?