EverWeb Widgets

Hero Animated Banner

This is an animated version of the Hero Banner. The h1 heading, optional h2 heading and the optional CTA link animate in to be vertically centered. The logo animates in to be positioned in relation to the top and left of the hero image.
The animations are created using CSS and the options are …
fadeInbounce|bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, fadeIn, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeInUpBig, flash, flipInX, flipInY, flip, hinge, lightSpeedIn, pulse, rollIn, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rollIn, rubberBand, shake, swing, tada, wobble, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp
The logo, h1, h2 and CTA all have controls for choosing the animation type and setting the duration and the delay.
The duration is the time of the animation in seconds and the greater the value - the slower the speed of the effect.
The delay is the number of seconds before the animation duration starts and is used to control the order in which the various items are animated in. The lower the delay time - the sooner the item will appear.
NOTE: Once the animation times have been set, the objects will disappear from view on the EverWeb design canvas. These times should be set after the items have been styled and just prior to publishing the page.
HERO Banner
The widget creates a full width, fixed height hero banner with an h1 heading, optional h2 heading, a CTA style internal link and a smooth scroll down chevron tab.
The items are centered both horizontally and vertically using some CSS magic and there is a control for adjusting the vertical spacing of the individual items.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
It can have a top and/or bottom separator to provide visual separation and two or more can be stacked to provide a high impact navigation.
Image
The image should have a high aspect ratio and have sufficient quality when viewed on wide screens. The image used in the demo is 2000px wide. If two are more are used on the same page, the image size should be kept as low as possible without compromising quality too much.
Headings
The h1 heading has controls for font size, letter spacing, color, text shadow radius and color, font style and weight and background color and opacity. The container can be styled with padding, border width, color and radius.
The optional h2 heading has all the same styling options apart from the text shadow.
CTA Link
The link tab has controls for font size, color, hover color, background color and opacity with adjustable padding and border width, color and radius.
Scroll Down
The smooth scroll down to an anchor link can be used to quickly get the visitor to a primary message or a choice of destinations using an item like the Hero Image or Info Link widgets.
The link uses a chevron down icon created using CSS so that the color can be changed on hover. It must obviously be used in conjunction with one of the anchor target widgets.
Logo
Note that the logo will disappear when the page is viewed on mobile devices such as an iPad or iPhone.
Parallax Effect
The banner has an optional parallax effect which requires checking a box and setting the "Scroll Ratio". This allows the content below to scroll over the slider at a different speed from that of the slider.
The lower the value for ratio - the slower the speed of the slide over layer.
See THIS page for how this works with a slide over transparent layer.

© EverWeb Widgets -