Parallax Scrolling Widget

Parallax Scrolling 3

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 Widget
Parallax Scrolling Content

Content

Each panel can contain an optional image with alt text and adjustable width, a heading, text and an optional CTA style tab link.
The panel height can be adjusted using the value for "Vertical Spacing" and the heading and text pushed downwards by increasing the value for "Text Top".

Parallax Scrolling Widget

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 -