Super Simple Text Rotator with jQuery and CSS3
| File Size: | 4.45 KB |
|---|---|
| Views Total: | 3882 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Text Rotator is a super tiny jQuery plugin used to sequentially or randomly rotate an array of text with 3D flip effects based on CSS3 transition, transform and perspective properties.
How to use it:
1. Include the latest version of jQuery javascript library in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
2. Include jQuery text rotator's javascript and CSS in the page, after jQuery library.
<script type="text/javascript" src="jquery.text-rotator.js"></script> <link rel="stylesheet" type="text/css" href="jquery.text-rotator.css" />
3. Create an Html element for the text rotator.
<span class="rotate">Demo</span>
4. Create an array of text you want to rotate and initialize the text rotator with options.
<script>
$(".demo1 .rotate").textRotate({
phrases: [
'Text 1',
'Text 2',
'Text 3',
],
animation: 'vertical-rotate',
delay: 1000,
random: true,
phrases: [],
keep_initial: true,
height: '30px',
width: '200px'
});
</script>
This awesome jQuery plugin is developed by joshcutler. For more Advanced Usages, please check the demo page or visit the official website.











