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
  • Bower
  • Link required files
  • Step two. Create HTML markup
  • Step three
  • Initialization on one element
  • Initialization of the group of elements alternately
• Methods
  • Method 'init'
  • Settings 'init' method
    • type
    • method
    • separator
    • animation
    • animationSpeed
    • animationEasing
    • animationType
    • animationScale
    • animationRotateDeg
    • animateCssClass
    • animateCssAnimation
    • delay
    • delayStart
    • delayGroup
    • animateOne
    • reverse
    • trim
    • css
  • Method 'stop'
  • Settings 'stop' method
    • content
    • separator
    • trim
  • Method 'reinit'
  • Settings 'reinit' method
• License

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="https://github.com/Arttse/jquery.auto-text-rotating/raw/master//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Include jQuery plugin -->
<script src="https://github.com/Arttse/jquery.auto-text-rotating/raw/master/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