PhotoKit Parallax Video

Infinite loop background MP4 video

Widgets

Parallax Video

The video autoplays and loops so it should have no soundtrack and the video file size used should be as small as possible.
The video file used in the demo was reduced to 593 × 334 with a file size of 1.5 MB
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 a grid layout. An HTML% <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.

Parallax Image

Page Items

The PhotoKit Nav widget is inserted below the video widget and the box to overlay the item above at the top is checked
The navigation background color and opacity can be adjusted to blend in with the video overlay.
Text
The PhotoKit text module is used to insert the text between the parallax items although most responsive widgets will be OK.
Footer
The PhotoKit Info footer is used to finish off the page. It allows for extra navigation at the bottom of the page and a smooth scroll to the top function.
These three widgets are included in the PhotoKit Parallax pack.