Tutorials & Examples

Find out how to use CoolText, both via javascript & html, following the tutorials on these pages.

Using CoolText via Html

CoolText can be used also without javascript, simply adding some attributes to html tags. There are basically five attributes you can use:

ct-sequence: The animation sequence to be automatically executed
ct-mouseover: The animation to be executed on mouse over
ct-mouseout: The animation to be executed on mouse out
ct-click: The animation to be executed on mouse click ct-config: CoolText configuration settings

A simple example

The following example shows you how to create an animation to be executed on document ready. The cool53 IN animation is applied to the text.

Creating a sequence

You can also create an animations sequence using the following syntax. The sequence starts as soon as the document is ready. You can see the result clicking the RUN button.

RUN

NOTE: using CoolText via html you can't update the text inside a sequence.

Animation parameters

You can control each animation using parameter as speed, stagger, order and so on and choose to apply the effects to letters or words. For a complete list of options, see the docs section. You should use the parameters using the following order:

animation: the animation name
elements: "letters" or "words"
speed: the animation speed (a value greater than 0)
stagger: the delay between elements (a value greater than 0)
delay: the number of seconds before the animation starts
order: the elements order ("forward", "reverse" ore "random")
color: use this to change the elements color during the animation

Here's an example:

RUN

NOTE: The color is applied to the specified elements (words or letters). So if, for example, we change the letters colors to red and then we try to set the words color to yellow, nothing seems to happen. The words divs are correctly set to yellow, but the letters divs (which are inside words divs) are red. So we still see the letters red.

Mouse events

CoolText can animate elements on mouse over (using the ct-mouseover attribute), out (ct-mouseout) and click (ct-click, specifying the parameters in the followinf order:

animation: the animation name
elements: "letters" or "words"
speed: the animation speed (a value greater than 0)
stagger: the delay between elements (a value greater than 0)
delay: the number of seconds before the animation starts
order: the elements order ("forward", "reverse" ore "random")
overwrite: if "true", the animation starts immediatly, stopping the other ones. If "false" the animation doesn't start until the other ones are finished
color: use this to change the elements color during the animation

Here's an example:

sample text to animate

Animating on Visible

You can choose to start an animation when your text become visible while scrolling the page, using the ct-visible attribute with the same parameters described for mouse events.

Here's an example:

Configurations

Using the ct-config attribute you can set the following CoolText properties:

cycle: for a cyclic sequence
pause-on-mouseover: to let the animations pause on mouse over
resume-on-mouseout: to continue the animations on mouse out
wait-for-load: wait for window load before init CoolText

If you want to set one or more of the above settings, just write them inside the attribute. Here's an example

sample text to animate

Running Wordpress?

Check out our CoolText Wordpress Plugin