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

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

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

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

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

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

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

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

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

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

<h1>Rainbow</h1>

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

$(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; }

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

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

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree