Viewport Height Video
Scale in video with fade in overlay and soft bounce text block with heading, paragraph and CTA style link.
Hero Image
EverWeb Widgets
Float In Video & Logo Nav Heading
Video
Full size, background images and video are obviously not an option when creating responsive pages. This widget creates a full width video which has its height set to 100vh. This allows it to fill the height of the screen rather than the browser background so a much smaller size video file can be used. The video can then be given a fixed positon so that the content below scrolls over it to give the illusion of a background video without the disadvantages.
Video File
The video file should be as small as possible. The one used in this demo is a standard 16:9 video reduced to 640px wide. The quality does not need to be great for an item placed in the background.
The original file was 17.5 MB and the reduced file is a mere 830 KB. This results in a huge reducion in the page download time. For mobile users, the file size should be kept as low as possible.
NOTE: The video is preset to autoplay and the soundtrack - if present - is muted. There is a control for turning on loop.
Overlay
The overlay has controls for setting the background color and its opacity. It has the option to add an HTML5 article element with an h1 heading and an optional paragraph and CTA style link.
Animation
Each animation is turned on by checking a box and there are controls for setting the animation time and delay for each.
The video animates in from the center outwards, the overlay fades in and the article element drops down and lands with a soft bounce.
Logo - Heading - Navigation
The item can be placed anywhere in the stack of widgets on the page. In this case, it is inserted below a hero item on the EverWeb design canvas and made to overlay it at the top when the page is published by checking a box. Checking another box makes it sticky by setting its position to fixed.
The widget has options for a logo and/or a heading and there is a "hamburger" icon on the right to open the navigation.
Since this is a grid layout, all the items are easily self centered vertically without any fancy CSS.
Rows
If all the items are selected, and the logo image is wide, the navigation can be set to have two rows on mobile devices.
In thise case, the navigation height is automatically doubled, the logo occupies row 1 and the heading and navigation icon are on row 2. The break point at which this happens is selected from a drop down menu.
Logo
The logo has controls for setting the image width and mobile width and for setting its distance from the left edge.
Heading
The h1 heading is centered and can use a websafe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, mobile size, style, weight, color and for letter spacing and mobile letter spacing.
Icon Tab
There is a slider to adjust the relative size of the icon and controls for color, hover color, background color and its opacity, border radius and the position in relation to the right.
Navigation
The navigation drop down is open so that the links can be added and styled. It is then closed by checking a box prior to publishing.
There are controls for setting the drop down width, link size, color and hover color, background color and its opacity and the separator width. The separator inherits the font color.
There is a checkbox for turning on the option to show the current page link in a different color.