jQuery plugin to change/rotation of text or html, single or group, automatically with a separator.
- 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.
npm install jquery.auto-text-rotating
bower install jquery.auto-text-rotating
<!-- 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><div class="element">First|Second|Third</div>$('.element').atrotating();$('.element').atrotating({
method: 'group'
});When HTML:
<div class="element">First|Fourth</div>
<div class="element">Second|Fifth</div>
<div class="element">Third|Sixth</div>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);The plugin takes the settings as an object.
Type: string
Default: text
Available:
text— processed just text, cut out all html tags.html— processed text with html tags.
Type: string
Default: single
Available:
single— to handle one at a time.group— to process each element in turn in the group.
Type: string
Default: |
The delimiter to separate the text into parts that will change.
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.
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.
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'.
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.
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.
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.
Type: string
Default: animated
Class element specified in Animate.css. Applies only to animation animateCss.
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.
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.
Type: number
Default: 2000
The delay before the first change of the text after initialization.
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.
Type: boolean
Default: false
Animate the element, if there are separate parts to change the text.
Type: boolean
Default: false
Rotation of the parts of text from the end.
Type: boolean
Default: true
Remove whitespaces at the beginning and at the end of the replaceable parts of the text.
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"
}
});Stop the rotation of the text.
Examples of usage:
$('.element').atrotating('stop');OR
var settings = {
content: 'firstPart',
separator: ',',
trim: false
};
$('.element').atrotating('stop', settings);The plugin takes the settings as an object.
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.
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.
Type: boolean
Default: taken from the settings when you initialize
Remove whitespaces at the beginning and at the end of the text.
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);Similar to the settings of the method init.
MIT © 2015-2016 Nikita «Arttse» Bystrov