ThemeKit UI
Swing HeroA hero image inserted in three sizes with an overlay article - top, center or botom.
The full width fixed height image has an overlay grid with the option to add a logo/internal link at the top left.
The text area is an HTML5 <article> with a heading, optional styled span, text and the option to add one or more internal/external links.
The articke can be aligned top, center or bottom and has controls to add a border and/or a bottom box shadow.
The on scroll animation rotates the image on the X-axis leaving the text area "hanging".
The only adjustment required is to set the rotate angle and set the perspective.
The perspective is set in vw (viewport width units). Lowering the value increases the effect. Setting the value to zero removes the perspective.
Note the ThemeKit UI Logo Header and the Heading widget can be used with a hero item to overlay if required.
Check the box for overlaying the top item and increase the z-index so that it is above the other content items in the stacking order.
Reduce the opacity of the background color(s) if required to allow the image to show through.