Highly Customizable jQuery Text Rotator Plugin - atrotating.js

atrotating.js is a lightweight, CSS-less jQuery plugin used for rotate a set of text or html elements (separated by '|' by default) in and out on a given interval. The plugin currently comes with 5 built-in transition effects. You can also use Animate.css for more awesome CSS3 animations.

How to use it:

1. Include jQuery library and the jQuery atrotating.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.auto-text-rotating.js"></script>

2. Include the Animate.css if needed.

<link rel="stylesheet" href="/path/to/animate.min.css">

3. Create a set of text you want to rotate in and out.

<div class="demo">Text-1|Text-2|Text-3</div>

4. Active the plugin with just one JS call.

$('.demo').atrotating();

5. Change the default transition effect.

$('.demo').atrotating({

  // fade, scale, spin
  // flipY, flipX or no
  animation: 'scale'
  
});

6. Use Animate.css powered CSS3 animations.

$('.demo').atrotating({
  animation: 'animateCss',
  animateCssAnimation:['bounceIn', 'bounceOut']
});

7. The plugin also works with html elements.

<div class="demo">
  <span class="badge">First</span>|<span class="badge">Second</span>|<span class="badge">Third</span>
</div>

$('.demo').atrotating({
  type: 'html'
});

8. Text group is supported as well.

<div class="demo">First|Fourth</div>
<div class="demo">Second|Fifth</div>
<div class="demo">Third|Sixth</div>

$('.demo').atrotating({
  method: 'group'
});

9. All configuration options with default values.

// text or html
type: 'text',

// single or group
method: 'single',

// built-in animations
// fade, scale, spin
// flipY, flipX or no
animation: 'fade',

// animation speed
animationSpeed: 300,

// easing effects
// string or array
animationEasing: 'swing',

// animation type
// full, in, or out
animationType: 'full',

// Resize the animation
animationScale: [1,0],

// The degree of rotation
animationRotateDeg: 720,

// animate.css options
animateCssClass: 'animated',
animateCssAnimation: ['bounceIn', 'bounceOut'],

// delay options
delay: 2000,
delayStart: 2000,
delayGroup: 2000,

// animate the element
animateOne: false,

// custom separator
separator: '|',

// reverse?
reverse: false,

// remove whitespaces
trim: true,

// additional CSS rules
css: undefined

10. Public methods.

// stop the text rotator
$('.demo').atrotating('stop');

// re-init the text rotator.
$('.demo').atrotating('reinit');

Change log:

2016-01-27

• AMD support

2015-12-12

• Small optimization

---

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