Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. 4 jQuery плагина для улучшения типографики сайта

4 jQuery плагина для улучшения типографики сайта

slab

Типографика является очень важным элементом красивого дизайна, но когда дело доходит до веб – то эта деталь частенько упускается из вида. Даже если вы обращаете тщательное внимание к типографике в своих проектах, HTML и CSS, зачастую, не дают вам полного контроля, который необходим для выполнения задуманного.

Если вы нуждаетесь в лучшем контроле над типографикой в своих проектах, тогда попробуйте использовать некоторые из следующих плагинов jQuery:

Lettering.js

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

  • Манипуляция и управление кернингом каждого отдельного текста
  • Раскраска отдельных букв заголовков
  • “Ералаш” вращения отдельных букв, для создания игривого эффекта

Пример кода

Вот небольшой пример того, как можно использовать плагин Lettering.js, чтобы добавить индивидуальность к вашим заголовкам:

При таргетировании заголовка, вам нужно использовать функцию “надписи” (lettering):

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

Затем, добавьте использование custom_title класс для заголовка, который вам необходим:
 

<h1 class= "custom_title ">Ералаш</h1>

Функция “lettering” автоматически добавит спан к каждой букве custom_title заголовка, вроде этого:

<h1 class="custom_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>
</h1>

Теперь просто используйте стандартный CSS, в целях таргетирования отдельных спанов в заголовке:

h1.custom_title char1 {
/* здесь задаются параметры для первого символа и тд. */
}

eralash-js

Скачать здесь.

FitText

Когда вы делаете графический дизайн в Photoshop, то вы масштабируете строку текста по ширине родительского элемента, что является простой задачей. Если вы хотите сделать то же самое с вашей веб-типографикой, то тогда вам необходим FitText.
FitText будет действительно полезным, если вы создаете респонсив веб-сайт. Например, если вам нужен респонсивный текстовый логотип, то вы можете использовать FitText для создания такого рода логотипа, который будет масштабироваться под любой экран.

Пример кода

FitText чрезвычайно прост в реализации:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>

В style.css, убедитесь, что у вашего заголовка задана ширина:

#responsive_headline {
display: block;
width: 100%
}

Просто используйте указанный CSS элемент, чтобы выполнить fitText:

<h1 id= "responsive_headline">Заголовок</h1>

zagolovok

Скачать здесь.

ArcText

ArcText является jQuery плагином, который позволяет закрутить слова по криволинейной траектории. Он использует Lettering.js для автоматического расчета вращения для каждой буквы в слове, и гарантирует, что повернутые буквы будут распределены равномерно вокруг воображаемой криволинейной траектории. Фактическое вращение осуществляется с помощью трансформаций CSS3, и рассчитывается на основании радиуса, а также ширины текста.

Пример кода

Для получения изогнутого текста:

$example1.arctext({radius: 300})

Модификация направления:

$example2.arctext({radius: 400, dir: -1})

Как удалить вращения, чтобы буквы оставались выложенными над аркой:

$example3.arctext({radius: 500, rotate: false})

zagolovok2

Скачать здесь.

SlabText

SlabText похож на FitText, за исключением, того что он работает на нескольких строках. SlabText позволяет вам сделать жирные (bold), привлекающие внимание респонсивные заголовки. SlabText позволяет создавать многострочные заголовки, которые подгоняются под размер любого браузера, разделив заголовки в строки, затем изменяя размер каждой строки для того, чтобы заполнить пространство по горизонтали окна.
Вы можете позволить SlabText автоматически создавать отдельные строки, или вы даже можете указать слова, которые вы хотите, чтобы оставались вместе на линии, с расчетной и заданной функцией словосочетаний.

Пример кода

Для работы плагина требуется следующие правила CSS:

.slabtexted .slabtext
{
display:-moz-inline-box;
display:inline-block;
white-space:nowrap;
}
.slabtextinactive .slabtext
{
display:inline;
white-space:normal;
font-size:1em !important;
letter-spacing:inherit !important;
word-spacing:inherit !important;
*letter-spacing:0 !important;
*word-spacing:0 !important;
}
.slabtextdone .slabtext
{
display:block;
}

Добавьте slabtexed класс к body элементу, и используйте slabtextdone для заголовков, которые вы хотите изменить, это будет динамически изменять размер заголовка по умолчанию, с автоматической вставкой span class= “slabtext”.

Вы также можете задать слова для каждой строки вручную с помощью span class= “slabtext” обертки вокруг каждой строки.

<body class ="slabtexted">
<h1 class= "slabtextdone">The Rows Here Will Be Dynamically Resized Upon Browser Resize</h1>

<h1 class= "slabtextdone">
<span class= "slabtext">The Rows Here</span>
<span class= "slabtext">Are Resized</span>
<span class= "slabtext">Based On The</span>
<span class= "slabtext">Span SlabText Markup</span>
</span>
</h1>
</body>

slabtext2

Скачать здесь.

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

Высоких конверсий!

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний