scrolling parallax images

Parallax Scrolling

content section image

Parallax scrolling is used in web design to create a subtle 3D effect by moving the full size background images at a slower speed than the foreground content while scrolling.
This page is responsive down to the width of an iPhone in portrait mode so the content width is set to 320px in the Page inspector in EverWeb.

parallax scrolling web page


Parallax content image

Each content section can contain a heading, an optional image with alt text, a text description and an optional CTA style link tab which is configured as an internal link.
The relative height of the content panels can be altered using the control for "Vertical Spacing".

parallax content

Widget Setup

The background images are full size responsive and have a control for setting their height.
The content panels are also responsive but have a control for setting the maximum width to limit the spread when that page is viewed on computers with a wide browser setting.
The optional footer is for the copyright notice. Use the HTML © to create the copyright symbol. The copyright year is automatically inserted and updated.
The footer has a smooth scroll, back to the top chevron tab.

© EverWeb Widgets -