Сегодня рассмотрим плагин для создания забавного эффекта для текста. Плагин позволяет изменять цвет буквы, цвет, стиль анимации, комбинирование этих свойств создает интересный эффект для текста, особенно этот эффект подойдет для различных заголовков

Для полной работоспособности плагина нужно подключить два файла: jquery.funnyText.js и jquery.funnyText.css ну и само собой jQuery библиотеку.

HTML структура

Плагин будет работать на любом селекторе или идентификаторе которые будут указаны во время инициализации плагина.

1
<div class="funnytext">funnText.js какой-то текст</div>

Инициализация плагина

Все что нам нужно это вызвать плагин на селекторе или идентификаторе в котором содержится текст:

1
2
3
$(document).ready(function() {
    $('.funnytext').funnyText();
});

Или вариант со всеми параметрами плагина:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $('.funnytext').funnyText({
        speed: 700,
        borderColor: 'black',
        activeColor: 'white',
        color: 'black',
        fontSize: '7em',
        direction: 'both'
    });
});

Опции

speed — скорость смены эффекта(по умолчанию 700);
borderColor — цвет границы буквы(по умолчанию black);
activeColor — цвет текста активной буквы(по умолчанию white);
color — цвет текста в самом начале эффекта(по умолчанию black);
fontSize — размер шрифта(по умолчанию 7em);
direction — эффект смены текста(по умолчанию both, доступны варианты horizontal и vertical).

Возможно вас это заинтересует
comments powered by HyperComments