Animated Parallax Image
Overlay with heading, text and optional link
WidgetsEverWeb Widgets
Animated Overlay
Parallax Overlay Animation
The parallax image has an overlay which can animate in using one of the fifteen available animations. Animation time and delay can be adjusted and are set in milliseconds.
By default, the animation is turned off when viewed on mobile phones but this can be turned on if required.
The image above has a swing up animation which is set to fire once on page load.
The image below has a scale animation which is set to fire every time the item scrolls into view.
Both examples have the animation turned off when viewed on mobile phones.
Images
The parallax images in the demo are are used in conjunction with responsive text widgets and the first image is overlayed at the top with a ThemeKit Logo Nav widget.
The images are loaded as background images and are inserted in three sizes - large, medium and small. The images used in the example were cropped to 1200px x 720px, 800px x 480px and 375 × 667px.
Note how the small image has been cropped to a 9:16 portrait aspect ratio for better performance on mobile phones in portrait mode.
Parallax Speed
The speed control is a slider with a default setting of 25. If set to zero the image will be fixed in position.
At maximum value there will be no parallax effect and the image will scroll with the rest of the page content.
Overlay
The overlay has a background color control with an opacity slider and has a grid layout. An HTML5 <article> element is centered horizontally and vertically over the image and has a maximum width setting.
Article
The article has a heading and text and an optional link these items have a control for spacing them out vertically.
The font can be web safe or Google hosted with a web safe fallback. The heading has controls for font size, mobile size, text align, letter spacing and text shadow.
The text has controls for font size, color, text align, line height and color.
The optional links can have a border with controls for border width and radius. The border color is inherited from the font color and the hover color from the link text's hover color.