Parallax

Parallax is a common technique used in application interfaces to make the interface appear to have real depth.

This demo shows the use of a polyfill of this feature using custom elements. The header is moving at a rate of 30% of the scroll. Try changing it and seeing the rate update.

How to use it

To add an element which moves with parallax, put a <parallax-content> element within a <parallax-container> element. The rate attribute on the <parallax-content> element defines how quickly the item moves with respect to the scroll movement.

The <parallax-container> element constrains the range within which the parallax element can move so the static content which will cover up the parallax content should be within the container as well.

How does the polyfill work?

Without native support, parallax can be implemented in two ways to make use of browser's native accelerated scrolling:

• Using perspective on the scrolling element to cause the shift in the scrolled parallax element to not be as great as the scrolled content.
• Using sticky position with a transform (scale or perspective) to make the sticky position offset not actually shift the element as much as necessary to counteract the scroll. This works because the sticky position shift is a layout time position shift which happens before transforms.

The perspective implementation unfortunately doesn't work on mobile Safari with the webkit-overflow-scrolling: touch property, and sticky position is not yet implemented on the Edge browser. This means that using both approaches is necessary to achieve support on all major browsers.

The polyfill currently only supports the position: sticky technique of implementing parallax which does not work on Microsoft Edge

Concessions for polyfill

In order to make the existing approaches for position sticky work, some concessions have been made:

For sticky, the containing block of the element must set perspective and encompass all of the content.

For perspective, the perspective style must be applied on or above a node which defines the overflow. This means that it can only be used with overflow scrolling nodes which prevents hiding top controls on mobile browsers.