Hero Spin In Image

EverWeb Widgets

Spin In Animation

Spin It

If a dramatic first impression is needed, this widget could be the answer. The full width, fixed height hero image has two optional headings and a centered overlay image that animates in with a spin.
Images
To make it suitable for responsive pages, the background image is inserted in two sizes - one for computers and the other smaller one for mobile devices. The images used in this demo were reduced to 1200px and 800px wide respectively before importing into EverWeb.
To those not familiar with creating responsive designs, these image sizes may seem small. Essentially, they are background images so top quality is not a consideration and a small size for fast download speed is the aim - particularly on mobile devices.
Headings
The optional headings are centered. The h1 heading animates in from the top and the h2 from the bottom. They have a full width background which has controls to adjust the color and its opacity.
The height of the headings is adjustable and the size of the spin in image is automatically adjusted to suit so that it doesn't overlap them.
Each heading has controls for the animation time and delay in seconds and the animation direction - up or down.
Center Image
The animated image has controls for adding a border and/ or a box shadow. The image can be square or rectangular and there is a checkbox to make it round or oval. Its overall size can be adjusted using the value for padding. The image used in the demo was cropped to 800px square before importing into EverWeb.
Spin Animation
There are checkboxes to turn on the animation, to allow it to occur only once and to allow it to function on mobile phones if required.
The animation time and delay are set in seconds and the angle in degrees. The angle can be set to a negative value by checking box to reverse the rotation direction.
Note that the higher the value for the angle and the shorter the animation time the faster the spin. Angles higher than 360° can be used to increase the speed. The example above is set to an angle of 720° with an animation time of 2 seconds.