Webmasters.BY

Главная Статьи Веб-программирование Arctext.js - создаем искривление текста при помощи CSS3 и JQuery
Arctext.js - создаем искривление текста при помощи CSS3 и JQuery
Рейтинг пользователей: / 0
ХудшийЛучший 
24.01.2012 20:30

Arctext.js - искривление текста при помощи CSS3 и JQuery

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

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

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

Параметры

Возможны следующие варианты настроек:

radius  : 0,
// Минимальное допустимое значение равно половине длины слова.
// Если значение -1, слово будет прямым.
 
dir     : 1,
// 1: кривая снизу,
// -1: кривая сверху
 
rotate  : true,
// если true каждая буква должна быть повернута.
 
fitText : false
// Если вы хотите попробовать плагин fitText (http://fittextjs.com/) установите этот параметр как true.

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

Скачать исходники

Перевод материала с tympanus.net/codrops

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


Защитный код
Обновить

Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Обновлено 24.01.2012 21:04
 

Апельсин-1

Голосование

Ваш любимый html-редактор?

Новые файлы

Шпаргалка по HTML5 Canvas

Archive - бесплатный кириллический шрифт

Шпаргалка по HTML5 атрибутам обработчиков событий

См. также

activecloud.ru

TisRef

Баннер

Видеоуроки

Система Orphus

Кто онлайн

Сейчас 66 гостей онлайн

Комментарии

Статистика
Webmasters.BY © 2008 - 2012