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