Single Page Parallax Effect

so to make sure i am clear on what you need to do:

You have a one-page design, which features a “stack” of content sections on the page? the standard one-page kind of deal?

you need to A) create a template which stacks all of these sections on one page, and B) set up your navigation as such that it will skip down to the corresponding section when clicked?

I have been doing a number of these recently, all in Headway. Its pretty simple with HW actually.

A) create a homepage template. Add your wrappers first – not content blocks – as these make it easier to contain the sections.
– In your first wrapper create your normal navigation block and header block etc.
– then in each subsequent wrapper, create each content block however necessary. If you are using Pages to create each section (like its own page), then use the functions in the Visual Editor to target a specific Page from the Content block.

now you should have a entire page set up – a stack of wrappers, starting with Header/navigation blocks, ending with footer block, and a bunch of separated content blocks between.

B) With your navigation, I used a plugin called “Page scroll to id” to control the connections, and to make smooth scrolling happen, not a jump. In the Menus panel, you turn on the extra settings, as you need to add a linkrel from the plugin to each link. make each link an anchor reference (#link) for the corresponding page.

returning to each page, add a “<div id=”link”>” in the code window at the top of each page.

With that, i was able to create one-page websites in Headway with smooth scrolling.

hope that helps.

Hello Glenroy99

You sound like a very knowledgeable person to ask my question…
I’m hoping you can help me with an issue I’m having in headway. The HW support have said what I want to do is a “customisation” issue, so they’re not willing to help me. But my issue seems pretty simple to me, so I’m looking elsewhere for help.

What I’m trying to do is create a 1 page scrolling site in headway. The issue I’m having is that the background images that I am using in the wrapper’s backgrounds don’t neatly butt up next to each other vertically, meaning that the wrappers’s backgrounds are cut off and don’t show the full image. I can get the full image to show when I change the cover settings and fixed etc, I’ve also helped things by adding padding to the wrapper, but I really want the parallax effect, and this is where my images change size vertically cutting off part of the image.

Here’s an example of what I mean. It’s a test page.

https://devsite.heatherfrahn.com/home-test/

As you’ll see when you scroll down the images are cut off. What I’m hoping for is that the TOP of the background images can bump up next to the wrapper above respectively.

For example, the image at the top of me with the guitar should display the butterflies on load, but it doesn’t, this is cut off. How do I get the wrapper backgrounds to show the image from the TOP of the image, and yet still have a parallax effect?

I’ve set the image to “top centre” or “top left” etc, but the header block at the very top of the page covers up the background image in the wrapper below the header (the image with the butterflies). How do I stop this from happening?

Would be ever so grateful if you could help me with this. As i’m not sure why it’s not just displaying the wrapper content neatly one after the other as it goes vertically down the 1 x page scrolling site/page.

Thanks very much.

re: rehtaeh

Headway couldn’t help you because its a CSS issue, not a theme framework issue. I assume you’ve done some reading on CSS and how to handle parallax scrolling with it, but perhaps just keep looking up more tutorials to get a better handle? you’re not far off.

basically, however, you are trying to create an exact placement of an image in a parallax situation – which just doesn’t happen. The nature of background image placement in the parallax model is variable – the images adjust to the size and width of the browser window. So trying to control exactly how much portion of an image is visible is going to change for everyone anyhow, depending on what browser, what size, etc. Parallax is a revealed-cropping of an image.

you want the top portion of the image to be revealed immediately, with the butterflies, but the actual container that holds the image is partially hidden in order to create the parallax effect. So you can’t have it both ways basically is what i’m saying. Sorry that isn’t the news you want to hear, but that is that.

if you want an easy plugin type of system to create parallax in headway, i would suggest checking out https://gingersoulrecords.com/. good luck.