Awesome Text Rotator Plugin With Smooth Transitions - textition

File Size: 6.03KB
Views Total: 5169
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Awesome Text Rotator Plugin With Smooth Transitions - textition

textition is a cool jQuery text rotator plugin that allows to add rotating text with smooth transition animations to your web page.

Features:

  • Uses CSS3 perspective, transition and transform properties.
  • 5 built-in animations: ease, ease-in, ease-out, ease-in-out and linear
  • No extra CSS styles required.
  • Autoplay on load.
  • Works with modern browsers.
  • Simple and easy to use.

See also:

Basic Usage:

1. Create a container and add a set of text for the text rotator.

<div id="demo">
<p>First text</p>
<p>Second text</p>
<p>Third text</p>
</div>

2. Include textition.js script after jQuery javascript library.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="textition.js"></script>

3. Initialize the plugin with options.

<script>
$(function() {
$('#demo').textition({
speed: 1,
animation: 'linear',
map: {
x: 200,
y: 100,
z: 0
},
autoplay: true,
interval: 2
})
});
</script>

4. All the default options.

<script>
$(function() {
$('#demo').textition({
map: { // Transition distance for each axis in pixels
x: 100,
y: 50,
z: 1000
},
speed:       1, // Number of seconds that textition animation should take to complete.
animation:   'ease', // ease, ease-in, ease-out, ease-in-out and linear
handler:     'click', // The event handler which start transition.
perspective: 300, // CSS3 perspective property for axis Z
autoplay:    false, // Automatic text changes
interval:    3, // Interval between automatic text changes
})
});
</script>

This awesome jQuery plugin is developed by dimajt. For more Advanced Usages, please check the demo page or visit the official website.