EverWeb ThemeKit

ThemeKit Auto Curtain

ThemeKit Auto Curtain

Info

Panels open on page load after a preset delay.

Click Curtain

Auto Curtains

The ThemeKit Auto Curtain widget has a background image with optiona heading and two animated panels sliding in from the left and right.
Background Image
The background image is inserted in two sizes. The images used in the demo were sized to 1200 x 800px and 720 x 480px and optimised before importing into EverWeb.
Left Panel
The panel has an image which has a maximum width setting and options to add a border and/or bottom box shadow.
The image used in the demo is a PNG so it was sized as small as possible and optimised before importing into EverWeb.
Right Panel
There is a heading, optional styled span, text and an optional internal/external link which has a new window option.
Animation
The animation uses internal styles so no external stylesheet is required. It has controlsfor time and dlay.On mobile phones the animation is removed, the item fills the height of the window and the image appears above the text.

Perspective Swing

The navigation panel animates out from perspective rotating out on the Y-axis. The navigation is full height and, when the number of links is greater than the viewport height the overflow will scroll.
The links scale up on hover when viewed on a computer and expand to fill the viewport height.
The current page link can be indicated using a different colot from the link and hover colors.
Action Tab
The tab is fixed in position and has controls for setting its distance from the top and the right.
On mobile devices the action tab can be set in the bottom half of the screen for greater user convenience. This distance is set as the number of viewport units from the bottom of the device window.