ThemeKit Hero
SVG Overlay
Info
ThemeKit Hero SVG S
SVG Overlay
The hero image has a 50% overlay with an S shaped right hand edge. The overlay is an SVG which has controls for background color and opacity and for adjusting the curve.
On browser/device screen widths below the break point the SVG is replaced by a transparent overlay that covers the image.
Images
The images are inserted using the HTML5 <picture> element rather than as background images so that they can have alt text for search engines and screen readers.
The image is inserted in three sizes for the various devices. The images used in the demo were resizex to 1200 x 800px, 800 x 480px and an image with a 9:16 aspect ratio for mobile phones in portrait mode. The latter is required for this demo because the option to make the image fill the viewport height on phones has been selected.
Text
The text and optional link are inserted in an HTML5 <article> element which is centered horizontally and vertically inside the SVG overlay.
Link
The optional link can be configured to open internal or external pages and has a new window option.
The link can have a border which inherits the link color and hover color and has a control for adjusting the border radius.
Animation
There are two animations available. One is to fade in the overlay on page load and the other is for animating in the text when the hero image is scrolled into view. The animation times and delays are set in seconds and the text animation has a chhoice of 15 different types.
ThemeKit Line Nav
Hover Line Animation
The navigation links use a CSS pseudo element to add an animated line at the top or bottom of the links. The nav is centered with a maximum width setting and has inline links with controls for horizontal and vertical spacing.
The hover line has controls for adjusting its height and color.
Current Page
The current page can be indicated using a different color and a line the animates in from the center out on page load.