EverWeb Widgets HTML5

Animate HTML Heading Color

Animation HTML Heading Color Change

Text Color Animation

The font color of an HTML heading can be animated over time with up to four color changes using this widget. Any Google hosted font can be used in the Font field of the widget settings and there is a choice of web safe fallback fonts in case the first choice doesn't load.
The widget settings for the above example are shown to the right and it can be seen that four different colors are used during the time frame.
The settings for background color and top/bottom padding can be ignored if the heading background color is set to that of the page.

Widget Settings

Enter the heading text and select the heading type.
Enter the name of the Google hosted font.
Choose a suitable web safe fallback font.
Set the font size, style and weight.
Select the text alignment and alter the letter spacing if necessary.
Set the heading background color and adjust the value for top/bottom padding to suit the font style.
Choose the colors and set the animation duration time in seconds.
NOTE: When the duration is set the heading color will probably change. This is quite normal if you think about it!

Widget Settings

Heading Color Animation Widget
Text Color Animation
Get The Widget