Parallax Scrolling

Parallax [2]


Scrolling Widgets

Parallax Scrolling

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.

Widget Features

Widget Features


Parallax [2]

This version of the Parallax widget has a text block with heading and description.
The background images have options for an overlay caption and/or a CTA style link. These are centered both horizontally and vertically and the vertical spacing can be adjusted.
The relative height of the content panels can be altered using the control for "Vertical Spacing".


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 -