The general goal of this project is to use JavaScript alone to generate the entire contents of the website. I wanted to take this a step further by learning about how to code the parallax effect. For those who are unfamiliar with parallax, it's the effect where the foreground and background moves at different speeds. In this application, scrolling down the page will display the parallax effect. Finally, The menu at the top of the page changes the entire contents of the page instead of navigating to a separate web page.
Parallax has 3 layers: I’ve named them fore, base, and back. The best way to visualize the effect is to explain what we see on long road trips. Let’s say you are a passenger of a long road trip, and you are looking out the side window. The long fence is the base layer. The background shows the hills and cows, and the foreground shows the cars you pass.
In parallax, we will always have the base layer and alternate between the foreground (the cars we pass), and the background (the hills and cows).
Please open the restaurant link and scroll:
The first div, “TYLPHE’s GRILL”, is the base layer. The next pair of div elements show the “MEAT.” text as the base layer and the steak image as the background. Scroll further, and now the image of ribs is the base layer. “MORE MEAT.” is now the foreground. We alternate between making the text layer and the background image as the base layer to create the parallax effect!
Because this was the first time creating the effect, I also applied parallax to the MENU page of my project. When you visit the page, you can see that I attach 5 pairs of background + base and base + foreground div elements.
I am very proud of myself for learning both the concept of parallax and applying it to my project. I had to be detailed and persistent to truly understand it!