Quad Hero
The hero can have a solid color or image background. The overlay has a text section and three images in a grid layout. The text section is in the top row of the grid and can be in column [1] or [2]. The items animate in with a staggered delay time.
Text Item
This is an HTML5 <artice> with a heading, text, optional list and an optional link to open internal/external pages and has a new window option.
The list has a choice of 15 different custom markers. There are controls for marker size, color and spacing and for the list item inset.
Fonts
There is an option to use a different font for the heading. In the example the heading font is the Google hosted "Spirax" and the other items use "Stint Ultra Expanded" - both with a web safe fallback font.
ThemeKit Reveal Wrao
Animations are useful for drawing attention to items on a web page but can easily become irritating unless they are subtle and used sparingly.
This text wrapped image container has a custom background animation which is unique and adds a professional touch to a web page design.
Items
This widget has an h1 heading, intro text, an optional image with alt text, an h2 heading, wrapped text and an optional link.
The image can be set as a percentage width for wrapping or full width. It can have a border and/or a bottom box shadow and its spacing from the wrap text adjusted and allowing for the box shadow by adjusting the value for padding-right and padding-bottom respectively.
Background
The container's background is a linear gradient using two colors in a four color gradient with adjustable gradient angle to allow the gradient to switch from one side to the other and back again in the animation cycle.
The background size has its width increased to 4 times the normal.
Animation
The animation uses keyframes to vary the background position from 0 to 100 over time and after a preset delay if required.
The effect can be varied by changing the background colors and their opacity and changing the gradient angle which can be varied from 0° to 315° using a slider.
The gradient angle in the demo is set to 45°.
The effect can also be varied by increasing/decreasing the time taken for the animation to complete its cycle.
The animation can occur once every time the item enters the viewport.
The animation is turned off for mobile phones by default but can be turned on for these devices by checking a box.
Link
The optional CTA (Call To Action) style link can open internal or external pages and has a new window option. The style can be changed by adding a border and using the background color opacity slider.