Audero Flashing Text Demo - Created by Aurelio De Rosa

Example 1 - Basic

This example shows the most basic configuration in which you call the auderoFlashingText() method without parameters using all the default values.

First

Second

Third

Example 2 - Set options

This example demonstrates how you can customize the animation passing options to the initialization method. In this example almost all the properties are used. Specifically, the call sets:

The fadeIn property to 500 milliseconds (0.5 seconds)
The duration property to 800 milliseconds (0.8 seconds)
The fadeOut property to 500 milliseconds (0.5 seconds)
The pause property to 500 milliseconds (0.5 seconds)
The selection property to descending so the order of the strings showed is inverted
The fontUnit property to em so the size of the font won't be set using pixels
The fontMinSize property to 0.5 so the minimum size the strings will be shown is 0.5em, that is half the base font size
The fontMaxSize property to 3 so the maximum size the strings will be shown is 3em, that is three times the base font size
The strings property to have the text of each <li> contained in the <ul> list inside the box

In addition, this example shows how to stop the effect and clean the resources attaching an event handler, that calls the destroy() method, to the click() event of the "Destroy Animation" button.

Lorem
Ipsum
Dolor
Sit
Amet

Example 3 - Toggle animation on user interaction

This example shows how you can start the animation selecting not only by id but also using other selectors like the class selector. In this case, the settings will be applied to all the elements in the retrieved set but then the effect can be disabled, enabled, or destroyed on a subset of the initialize set without affecting the others.

In addition, this example shows how you can toggle the animation every time an event is triggered. Specifically, the animation of the box on the left will be disabled or enabled each time the button reading "Toggle Animation" is clicked. The animation will be enabled or disabled depending on its previous status.