ThemeKit EZ Animation

EZ
ThemeKit EZ Hero

ThemeKit EZ

HERO

The hero image can have a parallax scroll effect, scroll with the content or be fixed for content scroll over.

Hero

The ThemeKit EZ Hero widget has an image inserted in three sizes with an alt text attribute and a lazy load option. There are controls for height and height on mobile phone in portrait mode.
The postion of the content can be adjusted and it can animate in on page load if required.

Content Block

The content has a heading, an optional styled span, text and optional internal/external links.
There are controls for …

  • Border width, color & radius
  • Bottom box shadow radius, blur & color
  • Check box to remove the bottom border
  • Vertical position - top center or bottom
  • Vertical position on phone portrait
  • Horizontal position - left, center or right
  • Slider to adjust vertical spacing from the top/bottom

Parallax

The parallax effect is implmemted using a custom jQuery plugin . It has a slider to adjust the effect. Setting the slider to zero allows it to scroll with the rest of the content and maximum fizes it in position for content scroll over. Setting the slider to its mid point is a good strating point for setting up the effect.
Header
The ThemeKit EZ Header widget is inserted first and set to "overlay at the top".

Navigation Menu

The ThemeKit EZ Navigation Menu skides down from the top centered in an overlay with variablebackground color and opacity.
The links are in an auto grid. The number of items per row for any given browser/device width is determined by the minimum link width and the navigation menu's max width.
The navigation can be viewed on the EverWeb design canvas for editing and then hidden prior to publishing.

Links

The links have controls for …

  • Font size, color and background color
  • Background hover animation color
  • Current page link background
  • Link spacing
  • Navigation background & its opacity

Action Tab

The tab has an active icon with the option to add text It has controls for color, background and border radius.
The position on the X and the Y-axis is adjustable and there is a control for z-index to bring it to the front.

Menu