Parallax Image
Overlay with heading, text and an optional link.
WidgetsParallax Images
The parallax effect has been around for quite a long time but still has a place in web design if used sparingly.
When interspersed with non paralax items, these images give the web page an appearance of depth.
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 Parallax Logo Nav widget.
The images are load 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 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.
Parallax Image
Overlay
The overlay has a background color control with an opacity slider and has a grid alyout. 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 link 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.