Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact. Thanks so much!
Below you can find the CoolText documentation. We recommend you take the time to check out the tutorials and examples available at the following website: www.megalocode.com
Created: January 2014
By: Thomas Dolso
Website: www.megalocode.com/cooltext
CoolText already comes with 300 ready-to-use animations. There are basically three types of animations:
IN: fading a text from opacity 0 to 1
OUT: fading a text from opacity 1 to 0
MID: opacity not affected
Take a look at the create_pack.html and try all the available animations.
Include jQuery, TweenMax, CoolText and the Animations Pack. Place the following inclusions inside the <head> section of your html document.
NOTE
In the above example we've included the entire animations pack cooltext.animations.js, which is approximately 210 kb in size. If you don't need to use all the animations, we strongly recommend that you create your own packs, using the file create_pack.html included in the zip file.
With CoolText you can animate one or more DOM elements (using jQuery selectors).
CoolText can animate text inside almost any html tags (h1, h2, p, div, etc.), referring it using jQuery selectors. Let's consider the following html tag
Initialize CoolText using jquery selectors. We suggest you to start CoolText at the document ready or using the waitForLoad options, as described below.
It's very easy to create animations sequences. The following example animates a DOM element (elementID) with an IN animation (cool12), waits for 2 seconds and then does an OUT animation (cool209). For a complete list of all the available animations, see the create_pack.html file included in the zip.
You can control each animation using parameters 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 options paragraph.
There are some other parameters you can use to control CoolText. For a complete list of options, see the see the options paragraph.
You can also specify more than one animation effect, letting CoolText choose one of them for you. Try running the following example many times.
During an animation CoolText can change other css properties. See the TweenMax website for a complete list of parameters you can specify.
NOTE: The css properties are 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.
During a sequence you can change the text you would like to animate and its css properties. You can also add or remove a css class by addClass and removeClass parameters, as described in the options paragraph.
A series of callback are available to control the animations during a sequence.
CoolText can animate elements on mouse over, out and click. The overwrite parameters, if set to true, is used to immediatly start the animation, stopping the other ones.
You can choose to start an animation when your text become visible while scrolling the page.
You can manually control the animations sequence using some useful public methods. Let's consider the first three, play, pause and restart.
You can also move through the sequence steps using the goto methods. As you could see, we've added the stop: true parameter to all the IN animations so that they stop as soon as they end. This is useful if you want to create a news ticker or something similar. When you use the goto method with where:'prev' or where:'next' CoolText goes exactly 1 step ahead or back. But if you want to move directly to the next or previous update, you should use the where:'prev_update' or where:'next_update' parameters.
NOTE: in this example the cooltext("goto", {where:'prev'}) called when a IN animation is finished don't seem to have any effect, repeating the last animation. However in this situation CoolText goes exactly 1 step back, finding the update action and then proceding to the IN animation. So this is correct.
The goto method accepts also the stagger parameter that lets you go to a sequence step "i" adding or subtracting an amount (the stagger). In the following example the cooltext("goto", {where:'prev_update', stagger:-1}) and cooltext("goto", {where:'next_update', stagger:-1}) move to one step back of the previous or next update, letting CoolText play the OUT animation before doing the update.
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
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. You can see the result clicking the RUN button.
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.
NOTE: using CoolText via html you can't update the text inside a sequence.
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 options paragraph. 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:
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.
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:
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:
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
The available options for this plugin are the following:
| Parameter | Available values | Default value | Description |
|---|---|---|---|
| sequence | array of animation or update objects. See below | - | animations sequence |
| cycle | true | false | false | if set to true the sequence is cyclic |
| pauseOnMouseOver | true | false | false | use it to stop the animations sequence on mouse over |
| resumeOnMouseOut | true | false | false | use it to resume the animations sequence on mouse out |
| waitForLoad | true | false | false | if set to true CoolText waits for window load event before starting |
| onComplete | function | - | A function that should be called when the sequence has completed |
| onMouseOver | animation object | - | animation to be executed on mouse over |
| onMouseOut | animation object | - | animation to be executed on mouse out |
| onMouseClick | animation object | - | animation to be executed on mouse click |
| onVisible | animation object | - | animation to be executed when the text become visible (while scrolling the page) |
As you could see, the sequence options accepts an array of animation or update objects, while onMouseOver, onMouseOut and onClick accepts a single animation object. The first parameter to set is action that accepts two values:
| Parameter | Available values | Default value | Description |
|---|---|---|---|
| action | "animation" | "update" | - |
use animation to animate a text use update to change a text |
Setting action to "animation" you could also specify the following parameters:
| Parameter | Available values | Default value | Description |
|---|---|---|---|
| action | "animation" | "update" | - |
use animation to animate a text use update to change a text |
| elements | "letters" | "words" | "letters" | use it to tell CoolText to animate letters or words |
| speed | an integer from 1 to infinite | 100 | use this percentage to set the animation speed |
| stagger | an integer from 1 to infinite | 100 | use this percentage to set the delay between elements (letters or words) |
| order | "forward" | "reverse" | "random" | "forward" | order in which the elements (letters or words) will be animated |
| stop | true | false | false | use it to stop the sequence as soon as the animation finishes |
| css | object of css properties | - | use it to set some css properties to be changed during the animation. CoolText accepts object like css:{color:"green", border:"1px solid green", padding:"10px"}. For more details about what and how to use, please refer to TweenMax documentation. |
| onStart | function | - | a function that should be called before the animation starts |
| onComplete | function | - | a function that should be called when the animation has completed |
If you want to update the text (action: "update") the available settings are:
| Parameter | Available values | Default value | Description |
|---|---|---|---|
| text | the new text | - | use it to set the new text |
| addClass | the class name | - | the specified css class name will be added to the html element |
| removeClass | the class name | - | the specified css class name will be removed from the html element |
| css | object of css properties | - | use it to set some css properties to the html element |