https://github.com/kaisermann/textlooper
Customizable and lightweight text content looper based on CSS animations.
https://github.com/kaisermann/textlooper
animation css css-animations customizable delay loop text
Last synced: 7 months ago
JSON representation
Customizable and lightweight text content looper based on CSS animations.
- Host: GitHub
- URL: https://github.com/kaisermann/textlooper
- Owner: kaisermann
- License: mit
- Created: 2015-08-31T21:24:55.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-05-10T18:21:38.000Z (almost 9 years ago)
- Last Synced: 2025-03-17T07:01:46.247Z (11 months ago)
- Topics: animation, css, css-animations, customizable, delay, loop, text
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
Awesome Lists containing this project
README
# 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**](https://daneden.github.io/animate.css/).
### [Sample/Demo](http://10de10.com.br/404)
# 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
* `data-textlooper-separator` _(optional)_
* 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
* `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
* `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`
## 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:
```javascript
new TextLooper(node, {
phrases: ['Array','of','phrases','to','loop']
ins: ['slideInUp'],
outs: ['slideOut'],
delays: [1000,1000,2000,3000,3000],
comebackAsOut: false
}).start();
```
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:
```html
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](http://kaisermann.github.io/textlooper/)
```html
Default, Phrase 1, Phrase 2, Phrase 3
Default, Phrase 1, Phrase 2, Phrase 3
Default, Phrase 1, Phrase 2, Phrase 3
Default, Phrase 1, Phrase 2, Phrase 3
Let's, Change | The, Separator | He he
This | will | wait | one | second
Multiple, delays, one, default, animation
Default, delay, one, custom, animation
Multiple, animations, one, default, delay
Multiple, animations, one, delay
Multiple, animations, on, this, one
Multiple, animations, on, this, one
```
## Methods
```javascript
var node = document.createElement('span'), tl;
// Creates a new instance and parses the node's attributes
tl = new TextLooper(node);
// Creates a new instance and skips the parsing step
tl = new TextLooper(node, {
phrases: ['Phrase 1','Phrase 2'],
ins: 'fadeIn',
comebackAsOut: true
});
// Starts looping
tl.start();
// Gets an instance attributes (phrases, animations, delays and separator)
tl.getAttributes();
```
##### Static
```javascript
// Look for (new) textLoopable elements
TextLooper.seek();
// Overrides default values
TextLooper.setDefaults({
delay: 1500,
in: 'fadeIn',
out: 'fadeOut',
selector: 'data-textlooper',
separator: ','
});
// Gets TextLooper default values
TextLooper.getDefaults();
```
# Compatibility
IE 10, Webkit 4.0, Firefox 16, Opera 15
# Bonus credits
* [Vitor Paladini](https://github.com/vtrpldn) 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).