ThemeKit Custom
Curtain Nav
15 Animation Types
EverWeb Widgets
Curtain Navigation
The curtain navigation animates in to fill the device's viewport. The links are spaced out evenly by using a CSS grid layout for the container.
Images
The widget inserts a large image for computers and a smaller ne for mobile devices. The default background on mobile phones is a solid color with an opacity slider. There is an option to use an image on phones .
The images used in the demo were resized to 1200 x 800px and 720 x 480px and "tinified" before importing into EverWeb. The phone image was cropped out at an aspect ratio of 9:16.
Overlay
The full size overlay has a contol for setting the color and its opacity. The links have controls for font family, fallback font, font size, font hover size, phone size, color and hover color. The increased hover font size creates a scale on hover animation.
Current Page
Checking a box will insert the script for showing the current page link which has a control to set it to a different color from the other links.
Animation
The curtain animates in with a choice of 15 animation types. The animation time is set in milliseconds. The animation uses a tiny custom stylesheet which has been minified for responsive design use.
Position
The widget has a fixed position so it can be inserted below the footer out the way of the rest of the content on the EverWeb design canvas.
Tab
The action tab has controls for icon color, hover color, background color and opacity, padding and border radius. Increasing the padding will reduce the icon size and vice versa.
Color Header
The header is fixed at the top and has a heading and an optional logo/link. There are two sets of background color controls - one for on load and the other for on scroll. It is design to sit over a hero item and be less conspicuous on page load. As the page is scrolled the background color can change if required and have more/less opecity.
The heading has controls for font, fallback font, color, weight, style, text shadow radius and color and letter spacing. The header height can be increased by increasing the padding.
NOTE: The widget should be the first item inserted on the page.