Hero Transparent Layer

In this example, the Hero Transparent Layer widget is used to create a slide over layer to show the effect of adding the parallax effect to the Hero Ken Burns Slider shown on the PREVIOUS page.
The parallax effect is turned on by checking a box and the Scroll Ratio is set to 40.
Layer
The slider is inserted first with position Y at zero.
The combined header & navigation widget is inserted next.
The transparent layer is inserted, positioned at the bottom of the slider and is set to 100% wide by checking the "Full Width" box in the Metrics inspector.
It is set to the required height by dagging it down or using the Metrics inspector.
In this case, the background is set to black and the opacity to 50.
To enhance the sliding over effect, web designers often use a leading edge box shadow. This is achieved by setting a negative spread radius to push the shadow off one edge of the box only. In this case, the shadow is inset into the layer rather than outset.
The optional leading edge box shadow is inserted with the radius set to 10px and the color to white.
Scrolling Content
The scrolling content is then added on top of the transparent layer.
In this case, a responsive widget is used with its built in footer since this page is designed to work on computers, tablets and mobile phones.
Parallax
Like any other effect, parallax should be used sparingly. Having all the items on the page move at different speeds and in different directions may excite the 10 year old visitors to the site for a few minutes but overuse creates confusion and distracts the visitor from viewing the actual content.
Using parallax on one item creates an interesting variation without defeating the purpose of the web page which is usually to inform or sell.
More …
Although a page can have several Hero widgets stacked vertically, the parallax effect can only be applied to one of them which would normally be the first one inserted on the page.