Ez In Hero Header

EZ In Hero Header

EverWeb Widgets

Animate In Hero Image

The image animates in from the left, right, top or bottom and has an overlay wth a centered h1 heading. The images are inserted in two sizes - one for computers and tablets in landscape mode and the other smaller one for tablets in portrait mode and mobile phones. The large image doesn't really need to be any wider than about 1200px and the smaller one can be 800px or less.
Overlay
The overlay has a grid layout and the heading is centered both horizontally and vertically inside it. There are controls to adjust the overlay color and its opacity.
Heading
The h1 heading is centered with a maximum width setting. It can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color, style, weight, letter spacing and mobile font size and letter spacing.
A text shadow can be added using the controls for shadow radius and color. The font used in this example is the Google hosted "Stint Ultra Expanded" which doesn't have a bold version. The text is made more visible by adding a 1px shadow with the same color as the font.
Animation
The animation fires every time the image is scrolled into the viewport. There is a checkbox to cause it to only fire once on page load and another to implement the aniimation on mobile phones.
There is a checkbox for turning on the animation and controls for setting the animation time and delay in seconds and for choosing the animation direction.
NOTE: When several of these widgets are inserted on the same page, the settings for "Animate only once" and "Animate on mobile phones" must be the same for each one.

Hero Float

Animate Text

The container is an HTML5 <article> element which is centered in the browser with a maximum width. The article has an h1 heading, a paragraph and an optional CTA style link. There is a control for adjusting the vertical spacing between the items.
The link can be configured to open internal or external pages and in a new window if required.
Animation
The animation fires every time the item is scrolled into the viewport. There is a checkbox to cause it to only fire once on page load and another to implement the aniimation on mobile phones.
There is a checkbox for turning on the animation and controls for setting the animation time and delay in seconds and for choosing the animation direction.
NOTE: When several of these widgets are inserted on the same page, the settings for "Animate only once" and "Animate on mobile phones" must be the same for each one.

© EverWeb Widgets -