Топ плагинов jQuery. Плагин Lettering.js

Дата публикации: 2017-02-01

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас простой и занимательный плагин Lettering.js. Если судить по названию, то плагин работает с буквами — и это действительно так.

Итак, что же делает плагин Lettering.js? Он решает достаточно простую задачу — плагин разбивает определенное слово или участок текста по буквам, оборачивая каждую букву в span с порядковым номером.

Зачем это может быть нужно? Все просто. Тем самым мы можем оформлять каждую букву по своему, задавать каждой отдельной букве свои цвет, шрифт, размер, наклон и т.д. Комбинируя оформление, можно создать эффект веселого, праздничного текста на странице без необходимости использования изображений.

Взгляните на официальный сайт плагина Lettering.js, согласитесь, текст заголовка смотрится занимательно:

Топ плагинов jQuery. Плагин Lettering.js

Давайте попробуем плагин в действии, реализуя различные примеры. Скачаем плагин с сайта GitHub. К слову, весит он всего пару килобайт, что совсем не много. Подключим его к нашей странице:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>

1 2	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.lettering.js"></script>

Теперь напишем тестовый заголовок, для которого и будем применять плагин. Пусть это будет слово rainbow (радуга), поскольку я хочу покрасить каждую букву в свой радужный цвет.

<h1>Rainbow</h1>

1	<h1>Rainbow</h1>

Теперь вызовем метод плагина для заголовка H1:

$(function() {
	$("h1").lettering();
});

$(function() {

$("h1").lettering();

});

Внешне пока ничего не изменится, но если мы заглянем в код заголовка, то там изменения будут видны.

Топ плагинов jQuery. Плагин Lettering.js

Как и отмечалось выше, плагин разбил слово на буквы, обернув каждую в свой span с классам char1, char2, и т.д…

Думаю, вы догадались, что нам остается лишь задавать стили для предлагаемых классов:

.char1 { color: #E10E03; }
.char2 { color: #FF770D; }
.char3 { color: #FFFC00; }
.char4 { color: #12F812; }
.char5 { color: #64CBEC; }
.char6 { color: #0007FC; }
.char7 { color: #A801FF; }

.char1 { color: #E10E03; }

.char2 { color: #FF770D; }

.char3 { color: #FFFC00; }

.char4 { color: #12F812; }

.char5 { color: #64CBEC; }

.char6 { color: #0007FC; }

.char7 { color: #A801FF; }

Топ плагинов jQuery. Плагин Lettering.js

Дальнейшее зависит лишь от нашей фантазии. Например, мы можем для каждой буквы задать свой угол наклона, тем самым заставив текст плясать на странице. В документации плагина предлагается простой вариант изменить наклон всех букв, враз сделав текст более веселым:

$("h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});

1	$("h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});

Топ плагинов jQuery. Плагин Lettering.js

Не бойтесь экспериментировать и, думаю, вы найдете применение плагину Lettering.js в своих проектах. Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки: jquery