Animated Text

Animated Text

Menu Animated Text

Animated Text

When developing a list for my Essex Archive "wish-list" I came across a requirement for a means to highlight some text in that list that would make the text stand out from the rest of the text in the list. Simply bolding or a colour was not enough as I was allready using multiple colours and there were traditional hyperlinks on the page.

The text that I wanted to emphasize:

Deeds and papers relating to the Belchamp Hall Estate, including deeds to land in Bulmer, Gestingthorpe, Little Maplestead, Witham and Manors of Little Maplestead, Belchamp Otten, Belchamp Walter and Rectory of Belchamp Walter (3 boxes) - 1736-1939
A8566 - https:// www.essexarchivesonline.co.uk/ result_details.aspx? ThisRecordsOffSet=1& id=396341 - not to be produced

The fading text was implemented using the W3C Framework. The Framework only allows limited control of the animation in the case of the text fade effect uses the class w3-animate-fading.

The w3-animate-fading class fades in and out an element every 10 seconds (continuously):

Top

The simplest way of changing the timing of the fade is to create a new class based on the w3.css class.

Here is a variation: I think 2 Seconds is probably good

A bigger example

Animated Text

Links