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

31

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. На черзі у нас простий і цікавий плагін Lettering.js. Якщо судити з назви, то плагін працює з буквами — і це дійсно так.

Отже, що ж робить плагін Lettering.js? Він вирішує досить просту задачу — плагін розбиває певне слово або ділянка тексту по літерах, обертаючи кожну букву у span з порядковим номером.

Навіщо це може бути потрібно? Все просто. Тим самим ми можемо оформляти кожну букву по своєму, задавати кожної окремої букви свої колір, шрифт, розмір, нахил і т. д. Комбінуючи оформлення, можна створити ефект веселого, святкового тексту на сторінці без необхідності використання зображень.

Погляньте на офіційний сайт плагіна Lettering.js погодьтеся, текст заголовка виглядає цікаво:

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

Давайте спробуємо плагін в дії, реалізуючи різні приклади. Завантажити плагін з сайту GitHub. До речі, важить він всього пару кілобайт, що зовсім не багато. Підключимо його до нашої сторінці:

Тепер напишемо тестовий заголовок, для якого і будемо застосовувати плагін. Нехай це буде слово веселка (райдуга), оскільки я хочу пофарбувати кожну букву в свій веселковий цвіт.

Rainbow

Тепер викличемо метод плагіна для заголовків 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 ви можете дізнатися з наших уроків або курсу. Удачі!