Viewport Height Slider
The images fill the browser or device window on page load.
VPH Image
EverWeb Widgets
Resize Header
Header & Navigation
The header shows a logo, h1 heading for the website name and an inline navigation when viewed on computers. The header resizes on scroll after a preset scroll amount which, in this case, is set to 100px.
On mobile devices, the header resizes and displays a "hamburger" icon to drop down a vertical navigation on click or tap.
The navigation has its position fixed to make it stick to the top of the page. In its default form, it has a clearfix to prevent it obscuring the top of a relatively positioned item below it.. This can be removed by checking a box to allow it to overlay the item below it as shown in this demo.
Link the other navigation widgets, this one can display the current page in a contrasting color and has the option to add an animated underline.
Viewport Height Slider
Slideshow
Background media such as an image or slideshow are obviously not possible for responsive page designs because the images would be far too large to download to a mobile phone over a wireless cellular network.
Viewport Height
An item can be made to fill the browser or device window by giving it 100% width and setting its height to 100vh.
Viewport Height (vh) — This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
If the item is fixed in position, the content below it will scroll over it and the effect will be the same as a background item without the huge penalty of downloading images in excess of 1Mb.
Images
The images in the slideshow are inserted in two different sizes - one for computers and the other for mobile devices. The large images used in this demo are only 1200px wide and weigh in at under 200Kb. The smaller images are 800px wide and their file size is only 40Kb.
These images are inserted using the HTML5 <picture> element which means that they can also have alt text for the search engines.
Slideshow
The slideshow uses a tiny jQuery plugin which is less than 2Kb. The options are inserted using media queries so that they can be chosen for both computer and mobile touch devices.
This means that the slideshow can be autoplay on computers if required but switches to manual play on mobile devices.
The navigation arrows when present are grouped together at the bottom right and the pager at the bottom center. They are moved up far enough from the bottom to allow insertion of an overlay toolbar as shown in the example on this page.
Pause On Hover
When in autoplay mode, the slideshow will pause on hover. This may not be obvious to the visitor so there is an option for adding a warning at the bottom right which will animate in when the visible image is hovered.
Both the "Paused" text and its color can be changed in the widget settings.
Overlay
The full size overlay can animate in on page load and has controls for the animation time and delay which are set in seconds.
The overlay can show a centered heading and paragraph with an option for a CTA style link. The items can be spaced out vertically and the link can be configured to open internal or external pages and in a new window if required.
This group has a maximum width setting and can also show a background with controls for the color and its opacity. When this background is set, the overlay opacity can be reduced to zero if required.