—»     —»   Arctext.js: сгибаем текст с помощью CSS3 и jQuery
  Раздел: Java-Скрипты, CSS/Style Sheets   Нет комментариев  

Arctext.js: сгибаем текст с помощью CSS3 и jQuery

Хотя CSS3 позволяет нам вращать символы, все равно практически непосильным трудом будет расположить каждую букву по кривой линии. Arctext.js представляет собой jQuery-плагин, который позволяет вам сделать это без особого труда. Плагин основывается на Lettering.js, он вычисляет точный угол вращения для каждого символа, и выставляет их по воображаемой арке с заданным радиусом.

Arctext.js: сгибаем текст с помощью CSS3 и jQuery

Как это работает

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

Опции

Вам будут доступны следующие опции:

radius  : 0,
// минимальное значение представляет собой половину ширины слова.
// если параметр выставлен на  -1, слово будет отображено прямо.

dir     : 1,
// 1: кривая направлена вниз,
// -1: кривая направлена вверх

rotate  : true,
// если true, вращаться будет каждый символ.

fitText : false
// если вы хотите попробовать плагин  fitText (http://fittextjs.com/), то выставляйте параметр на true.
// И не забудьте, что оболочка должна быть гибкой.


Посмотреть демо | Скачать архивом
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 6143   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031