jquery-bubble-text
This plugin introduces one animated way of changing text.
Examples
- Fading letters. (jsFiddle)
- Looping phrases. (jsFiddle)
Properties
Mandatory: element, and newText.
There are only two properties you must supply, so it can work:
var properties = { element: $element, newText: 'new Text', }; bubbleText(properties);
properties.element
is the DOM node in which the animation will occur and must be a leaf one (without children) because spans will run inside it during animation phase.properties.newText
must be a string.
Below you can see the optional properties:
speed
The default speed from start till the end is 2000 miliseconds, you can change it this way:
properties.speed = 3500; // 3.5 seconds
letterSpeed
This property has priority over properties.speed
. If you choose setting letterSpeed
, the total time of the animations will be proportional to its old and new text lengths.
properties.letterSpeed = 50; // miliseconds
callback
You can execute a function after the animation is completed:
properties.callback = function() { console.log('finished'); };
proportional
The proportional property is set true by default, if the initial text is "abcd"
and the new text is "ef"
, the animation will be:
- remove
"a"
, - remove
"b"
, - add
"e"
, - remove
"c"
, - remove
"d"
, - add
"f"
.
But some may prefer steps of 1 remotion and 1 addition:
- remove
"a"
, - add
"e"
, - remove
"b"
, - add
"f"
. - remove
"c"
, - remove
"d"
,
For that purpose you can use:
properties.proportional = false;
repeat
The repeat
action is 0
, by default it runs the animation only once. But you can repeat one animation again and again if you want so:
properties.repeat = 2;
Since Infinity - 1
results Infinity
, you can do an endless animation with:
properties.repeat = Infinity;
timeBetweenRepeat
The previous repeat
property has a default delay of 1.5 seconds before starting again, but you can change it:
properties.timeBetweenRepeat = 500; // 0.5 seconds
Methods
The bubbleText
function returns an instance control to you:
var ctrl = bubbleText(options);
This instance have three methods you can use:
restart
If you don't want to wait the end of the animation to restart with repeat
or callback
, you can use:
ctrl.restart();
This method:
- will instantly set the old text back;
- will do the animation again.
finish
If for some strange weird reason you need to finish the animation in a shot, you can use:
ctrl.finish();
This method:
- will instantly set the new text to the $element (without spans);
- will not restart the animation even with
properties.repeat
on; - accepts a boolean argument (when true will run the
properties.callback
function).
stop
If for some other strange weird reason you need to stop the animation, you can use:
ctrl.stop();
This method:
- will stop the spans immediately;
- will not remove the spans;
- will not trigger
properties.callback
.
You are able to call ctrl.restart
or ctrl.finish
after ctrl.stop()
.
Happy coding
That's it !! Thanks for your interest :)
Guedes, Washington.