EverWeb ThemeKit
Parallax Hero text overlay - heading, text and optional CTA.
Buy Now
Parallax Scrolling
Parallax scrolling images and content are generally not recommend for responsive web pages since they not are suitable for use on mobile phones due to the large size of the background image and the complexity of the Javavscript.
Background images should be avoided since they cannot have an alt text attribute for inserting keywords for the search ebgnies and screen readers.
This hero image has been designed from the ground up to overcome these problems.
The image is inserted in three sizes using the HTML5
Images
The images in the example were cropped to size and optimised before importing into EverWeb.
The image sizes are 1200 x 720px (200KB), 720 x 480px (90KB) and 9:16 aspect ratio image for phones in portrait mode at 375 x 667px (65KB).
Overlay
The image overlay has controls for background and its opacity and has a fade in on load animation with controls for time and delay in seconds.
Article
The HTML5 <article> element has a heading, text and an optional link. It has a maximum width setting and is centered horizontally and vertically in the overlay. It too has controls for the background color and its opacity.
Article Animation
The article can animate in using a choice five custom animations which are down, right, up, left and scale.
Parallax Animation
The parallax function is set using preset values from zero to 5 where zero is static, 1 is fast and 5 is slow.
Show/Hide Header Nav
The ThemeKit Show/Hide Header Nav is ideal for inserting over the top of a hero item since it disappears on scroll.
The widget creates a fixed header with a logo/link, h1 heading and an action tab to open the menu. It hides on scroll and appears when the scroll direction is reversed or the bottom of the page is reached.
Position
Since its position is fixed, the header can be inserted out of the way below the footer widget on the EverWeb design canvas. When viewed in the browser it will overlay the top of the first item on the page - in this case a slider.
To prevent this insert a spacer widget with the same height as the header.
Navigation
The links are in a grid with an auto layout. The number of links per row at any browser, device screen width will depend on the minimum width set for the links and the maximum width set for navigation container.
Links
The links have controls for font size, color, hover color, current page color, background color and its opacity, padding, border radius and spacing.
The navigation links can be seen on the EverWeb design canvas for editing and then hidden prior to publishing.
