jQuery.auto-text-rotating 
jQuery plugin to change/rotation of text or html, single or group, automatically with a separator.
Features
- Lots of settings, easy to customize to your liking.
- Support plain text and HTML.
- Alternately change/rotation of text, both single and in a group.
- The ability to control the settings of the animation of the appearance of the text and disappearance.
- 5 animations support functions smooth (Easing).
- Support animations Animate.css.
- The plugin can also be loaded as AMD module.
Table of Contents
Quick start
Step one. Installation
NPM
npm install jquery.auto-text-rotating Bower
bower install jquery.auto-text-rotating Link required files
<!-- Include jQuery library (For example served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- Include jQuery plugin --> <script src="jquery.auto-text-rotating.min.js"></script>Step two. Create HTML markup
<div class="element">First|Second|Third</div>Step three
Initialization on one element
$('.element').atrotating();Initialization of the group of elements alternately
$('.element').atrotating({ method: 'group' });When HTML:
<div class="element">First|Fourth</div> <div class="element">Second|Fifth</div> <div class="element">Third|Sixth</div>Methods
Method 'init'
Initialization. Start changing parts of the text with the settings.
Examples of usage:
$('.element').atrotating();OR
$('.element').atrotating('init');OR
var settings = { type: 'html', animationSpeed: [400,300] }; $('.element').atrotating(settings);OR
var settings = { type: 'html', animationSpeed: [400,300] }; $('.element').atrotating('init', settings);Settings 'init' method
The plugin takes the settings as an object.
type
Type: string
Default: text
Available:
text— processed just text, cut out all html tags.html— processed text with html tags.
method
Type: string
Default: single
Available:
single— to handle one at a time.group— to process each element in turn in the group.
separator
Type: string
Default: |
The delimiter to separate the text into parts that will change.
animation
Type: string
Default: fade
Animation when changing text.
Available:
no— there is no animation effect. Sometimes the correct thing? Huh?fade— the effect of the gradual disappearance (Easing).scale— the effect of increasing and decreasing the size of the element (Easing).spin— the effect of increasing or decreasing the size of the element + rotate (Easing).flipY— the effect of flip horizontally (Easing).flipX— the effect of flip vertically (Easing).animateCss— use an external library CSS3 animations Animate.css.
animationSpeed
Type: number or array
Default: 300
The execution speed of animation in milliseconds.
If you specify how number, for example — animationSpeed: 150, it will be set to the same value for the speed of the animation element in the appearance and disappearance.
If you specify how array, for example — animationSpeed: [300,400], it will set a different value for the speed of the animation element in the appearance and disappearance. The first value for the appearance, second to disappearance.
animationEasing
Type: string or array
Default: swing
Dynamics of execution of the animation. In jQuery is available linear and swing, but you can use other by connecting the appropriate extensions (for example, jQuery Easing).
If you specify how string, for example — animationEasing: 'linear', it will be set to the same value for the dynamics of the animation element in the appearance and disappearance.
If you specify how array, for example — animationEasing: ['swing','linear'], it will set a different value for the dynamics of the animation element in the appearance and disappearance. The first value for the appearance, second to disappearance.
Does not work with animation: 'animateCss'.
animationType
Type: string
Default: full
Available:
full— animates the selected animation the appearance and disappearance.in— animates the selected animation only appearance.out— animates the selected animation only disappearance.
animationScale
Type: array
Default: [1,0]
Resize the animation. Only applies to animations scale and spin. The first value of the array what will be the final size of the element after the gradual appearance of the text. For example, 1 is the standard size, 2 - twice, etc. The second value of the array define the final size after the gradual disappearance of the item.
animationRotateDeg
Type: number or array
Default: 720
The degree of rotation. Applies only to animations spin, flipY, flipX.
If you specify how number, for example — animationRotateDeg: 180, it will be set to 0 with appearance and 180 with the disappearance.
If you specify how array, for example — animationRotateDeg: [-90, 0], the first value for the appearance, the second for the disappearance. Excluding animation spin, there will always be 0 for appearance.
animateCssClass
Type: string
Default: animated
Class element specified in Animate.css. Applies only to animation animateCss.
animateCssAnimation
Type: string or array
Default: ['bounceIn', 'bounceOut']
What animation from Animate.css perform animating. Applies only to animation animateCss.
If you specify how string, for example — animateCssAnimation: 'jello', it will be given only one animation.
If you specify how array, for example — animateCssAnimation: ['fadeInLeft', 'fadeOutRight'], the first value for the appearance, the second for the disappearance.
delay
Type: number
Default: 2000
- If you specify how
method: 'single'— delay between the change of text in milliseconds. - If you specify how
method: 'group'— delay between the changing of the text of the elements of the group alternately in milliseconds.
delayStart
Type: number
Default: 2000
The delay before the first change of the text after initialization.
delayGroup
Type: number
Default: 2000
- If you specify how
method: 'single'— doesn't make any sense. - If you specify how
method: 'group'— the delay between full bore change the text for all the elements of the group at a time.
animateOne
Type: boolean
Default: false
Animate the element, if there are separate parts to change the text.
reverse
Type: boolean
Default: false
Rotation of the parts of text from the end.
trim
Type: boolean
Default: true
Remove whitespaces at the beginning and at the end of the replaceable parts of the text.
css
Type: object
Default: undefined
You can add CSS styles to the element. After the method 'stop' all styles will be removed.
$('.element').atrotating({ css: { "color": "#000", "font-size": "20px" } });Method 'stop'
Stop the rotation of the text.
Examples of usage:
$('.element').atrotating('stop');OR
var settings = { content: 'firstPart', separator: ',', trim: false }; $('.element').atrotating('stop', settings);Settings 'stop' method
The plugin takes the settings as an object.
content
Type: string
Default: currentPart
Available:
original— inserts the original text which was prior to initialization.firstPart— inserts the first part of the original text, separated by the specified separator.lastPart— inserts the last part of the original text, separated by the specified separator.currentPart— inserts the last shows part of the original text at the time of stop of rotation, separated by the specified separator.
separator
Type: string
Default: taken from the settings when you initialize
A separator for separating text into parts for insertion after the stop, it is necessary to content.
trim
Type: boolean
Default: taken from the settings when you initialize
Remove whitespaces at the beginning and at the end of the text.
Method 'reinit'
Another initialization with the new settings.
Examples of usage:
$('.element').atrotating('reinit');OR
var settings = { type: 'html', animationType: 'in', delay: 6000, separator: ',', trim: false }; $('.element').atrotating('reinit', settings);Settings 'reinit' method
Similar to the settings of the method init.
License
MIT © 2015-2016 Nikita «Arttse» Bystrov
