Плагин jQuery - Lettering

Веб типографика становится все более мощным и важным инструментом в деле построения и развития сетевых проектов. Lettering.js - небольшой плагин для радикальной веб типографики.

Плагин jQuery Lettering

Индивидуальный контроль над символами

Начнем с типового использования. 

<h1 class="fancy_title">Заголовок</h1>

Надо включить в код страницы jQuery, плагин Lettering.js и код для запуска скрипта:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
});
</script>

Скрипт поработает над вашим .fancy_title, а в итоге получится:

<h1 class="fancy_title">
  <span class="char1">З</span>
  <span class="char2">а</span>
  <span class="char3">г</span>
  <span class="char4">о</span>
  <span class="char5">л</span>
  <span class="char6">о</span>
  <span class="char7">в</span>
  <span class="char8">о</span>
  <span class="char9">к</span>
</h1>

А дальше остается лишь использовать CSS для классов .char#. Плагин задействует простой счетчик, но это самый быстрый и легкий способ получить контроль над каждым символом.

Можно забыть о головной боли при поддержке и внесении изменений в код. Допустим, ваш клиент/босс приходит на следующий день после завершения верстки и заявляет, что SEO специалист требует замены надписи на "Крутой заголовок". Все что нужно сделать - изменить  в разметке тег h1 на:

<h1 class="fancy_title">Крутой заголовок</h1>

Плагин Lettering.js также можно использовать в CMS (WordPress, Expression Engine и так далее) и в сочетании с другими плагинами.

 

Индивидуальный контроль над словами

Однако, можно использовать плагин не только для символов, но и для слов:

<p class="word_split">Разделяй и властвуй.</p>

<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

В итоге получится разметка:

<p class="word_split">
  <span class="word1">Разделяй</span>
  <span class="word2">и</span>
  <span class="word3">властвуй.</span>
</p>

И каждое слово можно можно стилизовать с помощью классов .word#.

 

Индивидуальный контроль над строками

Если форматирование текста имеет строки в рамках одного параграфа, разделенные тегом <br/>, то можно разбить такой параграф с помощью плагина на отдельные строки для стилизирования.

<p class="line_split">Сложный текст.<br/> Он включает несколько строк.<br/> Бывает и так.</p>

<script>
$(document).ready(function() {
  $(".line_split").lettering('lines');
});
</script>

В итоге мы получим:

<p class="line_split">
  <span class="line1">Сложный текст.</span>
  <span class="line2">Он включает несколько строк.</span>
  <span class="line3">Бывает и так.</span>
</p>

Ну а дальше дело CSS.

В одном из уроков на нашем сайте плагин Lettering.js используется в сочетании с другими техниками CSS для получения эффекта размытого текста.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^