Ротация текста - atrotating.js

Atrotating - плагин для изменения/вращения текста или HTML, одиночно или в группе, автоматически с сепаратором (вертикальной чертой "|").
Плагин поставляется с пятью встроенными эффектами перехода, но вы также можете подключить animate.css для использования более необычных css3 анимаций.

Особенности

• Много настроек, возможность удобно настроить по своему вкусу.
• Поддержка обычного текста и HTML.
• Поочередное изменение/вращение текста как одиночно, так и в группе.
• Возможность управлять настройками анимации появления текста и исчезновения.
• 5 анимаций с поддержкой функций плавности (Easing).
• Поддержка анимаций Animate.css.

HTML

Создаем набор текстов, которые хотим поставить в ротацию.

<div class="demo">Текст-1|Текст-2|Текст-3</div>

Если требуется другие виды анимаций, то подключаем animate.css

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

JS

Подключаем jQuery и скрипт плагина:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.auto-text-rotating.js"></script>

Инициализация на одном элементе:

<script>$('.demo').atrotating();</script>

Можно изменить стандартный эффект перехода:

<script>
$('.demo').atrotating({
    animation: 'scale' // fade, scale, spin, flipY, flipX или no
});
</script>

Можно инициализировать плагин с поддержкой animate.css:

<script>
$('.demo-5').atrotating({
    animation: 'animateCss',
    animateCssAnimation:['bounceIn', 'bounceOut']
});
</script>

Также плагин работает с html элементами:

<div class="demo">
    <span class="badge">Первый</span>|<span class="badge">Второй</span>|<span class="badge">Третий</span>
</div>

Инициализация будет такой:

<script>
$('.demo').atrotating({
    type: 'html'
});
</script>

Можно оперировать и с группой элементов поочередно:

<div class="demo">Первый|Четвертый</div>
<div class="demo">Второй|Пятый</div>
<div class="demo">Третий|Шестой</div>

Инициализация будет:

<script>$('.demo').atrotating({
    method: 'group'
});
</script>

Посмотрим на все параметры инициализации плагина, которые используются по умолчанию:

<script>
$('.demo').atrotating({
    // 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
});
</script>

Методы

Метод 'init'
Инициализация. Запуск смены частей текста с настройками.
Примеры использования:

$('.element').atrotating();

Или

$('.element').atrotating('init');

Или

var settings = {
    type: 'html',
    animationSpeed: [400,300]
};
$('.element').atrotating(settings);

Или

var settings = {
    type: 'html',
    animationSpeed: [400,300]
};
$('.element').atrotating('init', settings);

Настройки метода 'init'
Плагин принимает настройки в виде объекта.

type

• Тип: `string` 
• По умолчанию: `text`

Доступно:

• `text` — обрабатывается просто текст, вырезаются все html теги.
• `html` — обрабатывается текст вместе с html тегами.

method

• Тип: `string` 
• По умолчанию: `single`

Доступно:

• `single` — обрабатывать по одному единовременно.
• `group` — обрабатывать каждый элемент поочередно в группе.

separator

• Тип: `string` 
• По умолчанию: `|`

Разделитель для разделения текста на части, которые будут меняться.

animation

• Тип: `string` 
• По умолчанию: `fade`

Анимация при смене текста.
Доступно:

• `no` — нет никакого эффекта.
• `fade` — эффект постепенного исчезновения элемента (Easing).
• `scale` — эффект увеличения и уменьшения размера элемента (Easing).
• `spin` — эффект увеличения и уменьшения + кручения-верчения (Easing).
• `flipY` — эффект переворачивания горизонтально (Easing).
• `flipX` — эффект переворачивания вертикально (Easing).
• `animateCss` — использование внешней библиотеки CSS3 анимаций Animate.css.

animationSpeed

• Тип: `number` или `array` 
• По умолчанию: `300`

Скорость выполнения анимации в миллисекундах.
Если указать как `number`, например — `animationSpeed: 150`, то будет задано _одинаковое_ значение для скорости анимирования элемента при появлении и исчезновении.
Если указать как `array`, например — `animationSpeed: [300,400]`, то будет задано _разное_ значение для скорости анимирования элемента при появлении и исчезновении. Первое значение для появления, второе для исчезновения.

animationEasing

• Тип: `string` или `array` 
• По умолчанию: `swing`

Динамика выполнения анимации. В jQuery доступны `linear` и `swing`, но вы можете использовать и другие, _подключив соответствующие расширения (например, jQuery Easing)_.
Если указать как `string`, например — `animationEasing: 'linear'`, то будет задано _одинаковое_ значение для динамики анимации элемента при появлении и исчезновении.
Если указать как `array`, например — `animationEasing: ['swing','linear']`, то будет задано _разное_ значение для динамики анимации элемента при появлении и исчезновении. Первое значение для появления, второе для исчезновения.
Не работает с `animation: 'animateCss'`.

animationType

• Тип: `string` 
• По умолчанию: `full`

Доступно:

• `full` — анимирует выбранной анимацией _появление и исчезновение_.
• `in` — анимирует выбранной анимацией _только появление_.
• `out` — анимирует выбранной анимацией _только исчезновение_.

animationScale

• Тип: `array` 
• По умолчанию: `[1,0]`

Изменение размера в анимации. Применимо только к анимациям `scale` и `spin`. Первое значение массива - какой будет окончательный размер элемента после постепенного появления текста. Например, 1 - это стандартный размер, 2 - это в два раза больше и т.д. Второе значение массива - определяет окончательный размер после постепенного исчезновения элемента.

animationRotateDeg

• Тип: `number` или `array` 
• По умолчанию: `720`

Градус (deg) верчения-кручения элемента. Применимо только к анимациям `spin`, `flipY`, `flipX`.
Если указать как `number`, например — `animationRotateDeg: 180`, то будет задано 0 при появлении и 180 при исчезновении.
Если указать как `array`, например — `animationRotateDeg: [-90, 0]`, первое значение для появления, второе для исчезновения. Исключение анимация `spin`, там всегда будет 0 при появлении.

animateCssClass

• Тип: `string` 
• По умолчанию: `animated`

Класс элемента, заданный в Animate.css. Применимо только к анимации `animateCss`.

animateCssAnimation

• Тип: `string` или `array` 
• По умолчанию: `['bounceIn', 'bounceOut']`

Какими анимациями из Animate.css выполнять анимирование. Применимо только к анимации `animateCss`.
Если указать как `string`, например — `animateCssAnimation: 'jello'`, то будет задана только одна анимация.
Если указать как `array`, например — `animateCssAnimation: ['fadeInLeft', 'fadeOutRight']`, первое значение для появления, второе для исчезновения.

delay

• Тип: `number` 
• По умолчанию: `2000`
• При `method: 'single'` — задержка между сменой текста элемента в миллисекундах.
• При `method: 'group'` — задержка между сменой текста элементов группы поочередно в миллисекундах.

delayStart

• Тип: `number` 
• По умолчанию: `2000`

Задержка перед первой сменой текста после инициализации.

delayGroup

• Тип: `number` 
• По умолчанию: `2000`
• При `method: 'single'` — не имеет никакого смысла.
• При `method: 'group'` — задержка между полным проходом смены текста по всем элементам группы за раз.

animateOne

• Тип: `boolean` 
• По умолчанию: `false`

Анимировать элемент, если нет раздельных частей для смены текста.

reverse

• Тип: `boolean` 
• По умолчанию: `false`

Ротация частей сменного текста с конца.

trim

• Тип: `boolean` 
• По умолчанию: `true`

Удаление пробельных символов в начале и в конце частей сменного текста.

css

• Тип: `object` 
• По умолчанию: `undefined`

Вы можете добавить необходимые стили CSS на элемент. После выполнения метода 'stop' все стили будут удалены.

$('.element').atrotating({
    css: {
        "color": "#000",
        "font-size": "20px"
    }
});

Метод 'stop'

Остановка ротации текста.
Примеры использования:

$('.element').atrotating('stop');

Или

var settings = {
    content: 'firstPart',
    separator: ',',
    trim: false
};
$('.element').atrotating('stop', settings);

Настройки метода 'stop'

Плагин принимает настройки в виде объекта.

content

• Тип: `string` 
• По умолчанию: `currentPart`

Доступно:

• `original` — вставляет оригинальный текст, который был до инициализации.
• `firstPart` — вставляет первую часть от оригинального текста, отделенную заданным разделителем.
• `lastPart` — вставляет последнюю часть от оригинального текста, отделенную заданным разделителем.
• `currentPart` — вставляет последнюю показанную часть от оригинального текста на момент остановки ротации, отделенную заданным разделителем.

separator

• Тип: `string` 
• По умолчанию: берется из настройки при инициализации

Разделитель для разделения текста на части для вставки после остановки, необходимо для `content`.

trim

• Тип: `boolean` 
• По умолчанию: берется из настройки при инициализации

Удаление пробельных символов в начале и в конце текста.

Метод 'reinit'

Очередная инициализация с новыми настройками.
Примеры использования:

$('.element').atrotating('reinit');

Или

var settings = {
    type: 'html',
    animationType: 'in',
    delay: 6000,
    separator: ',',
    trim: false
};
$('.element').atrotating('reinit', settings);

Настройки метода 'reinit'
Аналогично настройкам метода `init`.