I’ve created an attractive (if inelegant) solution for scrolling content over a responsive background image. To create a masking effect, I have a banner with a responsive photo that is identical to the background photo. To make sure that the scaling is not affected by window height, the background photo is tall enough to handle the tallest window size.
This puts the window width in charge of the resizing, not the window height, which keeps the banner and background images in perfect sync.
It looks and works great, as the banner background always scales in perfect sync with the page background.
I’m wondering if there is an easier way - without the need for a banner photo, with the scrolling/draggable content residing within a box without a scroll bar.
An external HTML5 app would work, but I’d rather handle the links in the scrolling content within Freeway. I know that Freeway now supports HTML5 to some degree, but can this be achieved in Freeway without any coding?
Here’s a page under development. When you resize the browser window the identical banner and background images stay in sync. When you scroll through the page content, it disappears where it hits the ghost under the menu bar. I will see if I can drop the resolution, as the current load time is too slow.
The issue with scrolling content on an iPad is that the page itself can move a bit, in addition to the scrolling content. One very annoying thing is that the iPad lets above-page content show through the translucent menu bar at the top. You have to create a white object above the top edge of the window to conceal this.
Seems like a good and clever solution to the effect you seek.
But unsolicited feedback: It feels very odd that where the scrolled content disappears contradicts the expectations set up by the full bleed background photo and the transparency of the white band beneath the navband. I could see doing something like this in a situation in which you want to mess with peoples’ expectations, like say a site for a magician or rock band, but for a shutter company?
The issues:
I want to keep the menu bar, logo, chat button and other content where they are, so I can’t have the whole page scroll and if the scrolling content is visible behind these elements, it would look very bizarre.
Because of issues with dragging content on a tablet and the ugly factor of a scroll bar, it is best not to put the scrolling content in a box – better to scroll the whole object.
The load time of the scrolling content is an issue as well, as it involves a bunch of large images. Plus each image involves a button and a PNG shadow. To save on size, the photos are JPEGs and shadows are PNGs placed behind the photos, with the only pixel content of the PNGs being the visible shadow edges.
Also, the business of making the pile of photos and stacked content relative would be a nightmare.
As for the white ghost beneath the menu bar, having the scrolling content go up to the edge of the menu bar would be logical, but I wouldn’t be able to keep the tag line and USA art. There is already enough junk above the menu bar.
It’s not a bad solution and the background cover image brings uniformity to the site.