Since I'm still new to Javascript/Jquery/HTML5/CSS3, I thought I'd ask a question for all you much more experienced programmers out there.
I'm kind of stuck at the beginning of my program logic. I want to do a website with a parallax "scrolling" effect, however the effect should only take place when the user clicks navigation buttons on the edges of the screen.
The layout of the website will be like this:
O
OXO
O
The "O"'s are the content divs, "X" is the "home" page (point of origin). If the user clicks the arrow at the top of the screen (from point of origin), the page will scroll up. Same goes for any of the other directions. I'm wanting one giant photo of the establishment in the background that shifts it's position based on the specific content div they "scroll" to, using the parallax effect.
I've been racking my brain for two days trying to figure out where to start with this. Any help would be greatly appreciated, and please let me know if I need to be more specific about something. Thank you!
The home page content is in the middle of the parallax experience.
For this reason, you will need a parallax plugin that can handle both vertical and horizontal parallax effects to allow proper navigation in your webpage.
Consider: Scrolling Parallax Plugin for jQuery
The above parallax demo page allows you to scroll both directions.
Here's the method/approach I would take using this plugin.
1. Design your website with horizontal and vertical content as required. Layout example:
OOO Here, the top of the webpage is content about the "starting" point.
OXO Next, you have content on the sides of the "starting" point as shown.
OOO Finally, content is below the "starting" point to complete the webpage.
2. Since the webpage visitor will see the very top of the webpage which is not desired, use jQuery.scrollTo() Plugin to set the "starting" point on page load.
3. Use a plugin or method that will allow 4 transparent arrow "div's" that are at each viewport side in "fixed" position. When clicking (or hovering) with the mouse, this will simulate scrollbar movement and the parallax webpage plugin will react accordingly. Example of layout (note outer navigation is semi-transparent):
UUUUU Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR The center starting point will show the "fixed" Navigation arrows.
LOOOR LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD Bottom-content is here plus the overlay arrow for DOWN Navigation.
The most difficult part of the webpage is to have enough "filler-content" that occupies the top and sides of the "starting" point. But if that "filler-content" is a thumbnail gallery, then this particular parallax page would look really nice (and unusual!).