Whaaaaat?
- A very customizable and lightweight (1.35kB gzipped) text content looper based on CSS animations.
- This script uses
@keyframe
animations. That said, I highly recommend using Animate.css.
How to use
Using html attributes
To loop an element's text, just set a data-textlooper
attribute on the desired element and call the TextLooper.seek()
method somewhere on your code.
Attributes
-
data-textlooper
(mandatory)- Use
data-textlooper
with a single interval to specify a delay between all elements - Use
data-textlooper
with intervals separated by '|' to specify each delay
- Use
-
data-textlooper-separator
(optional)- Changes the default separator
,
- Changes the default separator
-
data-textlooper-in
(optional)- Use
data-textlooper-in
with a single animation name to specify the 'in'/'intro' animation to all elements - Use
data-textlooper-in
with animation names separated by '|' to specify each element's 'in'/'intro' animation - Defaults to
fadeIn
if defined without values
- Use
-
data-textlooper-out
(optional)- Use
data-textlooper-out
with a single animation name to specify the 'out'/'outro' animation to all elements - Use
data-textlooper-out
with animation names separated by '|' to specify each element's 'out'/'outro' animation - Defaults to
fadeOut
if defined without values
- Use
-
data-textlooper-comeback
(optional)- Set the
data-textlooper-comeback
attribute if it's desired to also run the inverted animations before changing to the next phrase. - Will be ignore if defined together with
data-textlooper-out
- Set the
Using javascript
It is possible to start looping a text node just by passing it as a parameter to a new instance of a TextLooper object.
Example:
node phrases: 'Array''of''phrases''to''loop' ins: 'slideInUp' outs: 'slideOut' delays: 10001000200030003000 comebackAsOut: falsestart;
Attribute Name | Description |
---|---|
phrases |
Array : phrases to loop through
|
ins |
String : a single in-animation for all iterations.
Array : customizable in-animations for each iteration.
|
outs |
String : a single out-animation for all iterations.
Array : customizable out-animations for each iteration.
|
delays |
Integer : a single delay interval for all iterations.
Array : customizable delay intervals for each iteration.
|
comebackAsOut |
A boolean defining if the out-animation should be the respective reversed in-animation.
|
Observations
Visibility
LoopText sets 'visibility: visible' when it starts looping. This way you can hide your phrases before the script runs with a 'visibility: hidden' statement.
Delay interval behaviour
For text-lopping WITHOUT comeback/out animations the delay interval starts counting AFTER the current animation has ended.
For text-looping WITH comeback/out animations the delay interval starts AFTER the first iteration of an animation but not after its comeback/out animations.
Missing list items
Each missing animation/delay item will be replaced with the first one of its list.
Example:
Multiple, animations, on, this, one
There are 5 different text elements and only three in-animations/delay items. The two missing items will be replaced by, respectively, '700' and 'pulse'.
Examples
Live examples
<!-- Default animation (fadeIn), default delay (1500), default separator --> Default, Phrase 1, Phrase 2, Phrase 3 <!-- Same animation as above but with its comeback animations --> Default, Phrase 1, Phrase 2, Phrase 3 <!-- Same animation as above but with default out animation (fadeOut --> Default, Phrase 1, Phrase 2, Phrase 3 <!-- Default animation (fadeIn), default delay (1500), default separator --> Default, Phrase 1, Phrase 2, Phrase 3 <!-- Default animation (fadeIn), default delay (1500), custom separator --> Let's, Change | The, Separator | He he <!-- Default animation (fadeIn), one delay (1000), custom separator --> This | will | wait | one | second <!-- Default animation (fadeIn), multiple delays --> Multiple, delays, one, default, animation <!-- Default delay (1500), one animation (bounceIn --> Default, delay, one, custom, animation <!-- Default delay (1500), multiple animations --> Multiple, animations, one, default, delay <!-- One delay (1000), multiple animations --> Multiple, animations, one, delay <!-- Multiple animations, multiple delays --> Multiple, animations, on, this, one <!-- Multiple animations, multiple delays with comebacks --> Multiple, animations, on, this, one
Methods
var node = document tl; // Creates a new instance and parses the node's attributestl = node; // Creates a new instance and skips the parsing steptl = node phrases: 'Phrase 1''Phrase 2' ins: 'fadeIn' comebackAsOut: true; // Starts loopingtlstart; // Gets an instance attributes (phrases, animations, delays and separator)tl;
Static
// Look for (new) textLoopable elementsTextLooper; // Overrides default valuesTextLooper; // Gets TextLooper default valuesTextLooper;
Compatibility
IE 10, Webkit 4.0, Firefox 16, Opera 15
Bonus credits
- Vitor Paladini for naming the
data-textlooper-comeback
attribute. (It was really hard to come up with a name for it and he mockingly requested for credits, so here we are).