CoolTextFeatureImage

CoolText WordPress plugin

My friend Thomas Dolso is the creator of CoolText, a JQuery / WordPress plugin to quickly add animations and transitions to HTML text.

In this post I will show you some features of the WordPress version.


Animate a sentence

To animate a sentence letter by letter use the [ cooltext ] shortcode and choose an effect from a very large list

[ cooltext sequence="cool15" settings="cycle"]Hello CoolText plugin![ /cooltext ]
Result:

Hello CoolText plugin!

NOTE: the best way to create loops is shown below but I have applied the cycle option in order to continuously show you the animations.

Animate word by word

[ cooltext sequence="cool9-words" settings="cycle"]
This is a simple sentence with loop
[ /cooltext ]
Result:

You can also animate word by word

Multiple sentences with different animations

[ cooltext sequence="cool47,cool116,cool230" separator="-" settings="cycle"]
this is the first text-this is the second text-this is the third text
[ /cooltext]
Result:

this is the first text-this is the second text-this is the third text

Over effects

[ cooltext mouseover="cool160" ]Over me![ /cooltext ]
Result:

Over me!

Advanced Use

CoolText WordPress plugin also provides a powerful way to add animations to any element of your website using JQuery selectors.

In the following screenshots you can see how I have created a custom class named mytest-cooltext-class to generate and apply a CoolText effect to any HTML elements of my WordPress posts.

Available from WordPress Settings
CoolText setting panel


So now I can simply use the effect in this way:

<h3 class="mytest-cooltext-class">my Custom class(over me)</h3>
<a href="#" class="mytest-cooltext-class">Links</a>

Result :

my Custom class (over me)

Links

NOTE: You can use any JQuery selector and associate custom animations to every < a > or < h1 > tags of your website

Other settings: stagger, delay, order, color

The plugin includes and supports a lot of cool features such as stagger, speed, delay, order, color and much more.

[ cooltext sequence="cool160-letters-80-50-0-forward-red"]...sentence...[ /cooltext]

[ cooltext sequence="cool160-letters-30-100-1-reverse-#666"]...sentence...[ /cooltext]</h1>
Result:

This is a sentence with stagger


This is a sentence with stagger

Check the official documentation and the example section to get more info.

CoolText Plugins

JQuery WordPress

Latest Posts

 

Comments (1)

  1. Robert Reed @ WpThemesbay (reply)

    March 5, 2014 at 1:15 pm

    Very nice plugin! I didn’t see any similar to this. It can help to add attention grabbing texts to posts (maybe for marketing purposes). Thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *

Published on: 4 March
Posted by:
Discussion: 1 Comment