retro animation for headers and text
Create a div with text:
<div id='textbanner'>Hello World!</div> <h1 id='textbanner'>Hello World!</h1> <p id='textbanner'>Hello World!</p>
Use jQuery to select element and call textbanner()
<script>
$('#textbanner').textbanner();
</script>
| Name | Datatype | Default | Description |
| cycles | int | infinity | Your text or header can move perpetually or go through every letter n times. This is good for associating the animation with buttons or events, or for a quick animation on page load. |
Click me for two cycles of animation
<p id="demo">Click me for two cycles of animation</p>
<script>
$('#demo').click(function() {
$('#demo').textbanner({
cycles: 2
});
});
</script>
Code for a button setup like the header:
<p id="demo">textbanner.js</p>
<div id="btn" class="btn btn-primary">Demo</div>
<script>
$('#btn').click(function() {
$('#demo').textbanner({
cycles: 1
});
});
</script>
Perpetual Animation
<p id="demo">textbanner.js</p>
<script>
$('#demo').textbanner();
</script>
| Name | Datatype | Default | Description |
| growth | percentage | 120% | The peak size in the oscilliation of each letter, as a percentage of its original size, which is inherited from the original element as well things like color and font. |
Click me for large growth
Click me for small growth
<p id="demo">Click me for large growth</p>
<p id="demo">Click me for small growth</p>
<script>
$('#demo').click(function() {
$('#demo').textbanner({
//large growth
growth: 150
//small growth
growth: 110
});
});
</script>
| Name | Datatype | Default | Description |
| speed | milliseconds | 100 | The speed at which the character animations individually occur. Accepts "slow", "intermediate", "fast", as well as numerical values for custom speeds. |
Slow Animation Speed
Intermediate Animation Speed (Default)
Fast Animation Speed
Custom Animation Speed
<script>
$('#slowdemo').textbanner({
speed: "slow"
});
$('#middemo').textbanner({
speed: "intermediate"
});
$('#fastdemo').textbanner({
speed: "fast"
});
$('#customdemo').textbanner({
speed: 136.7
});
</script>
@michaeldfaber on Github