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

Посмотреть Демо   Скачать исходники ( xdan )

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

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

Опции 

Доступны следующие опции плагина:

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

Чтобы чуть лучше понять, что делает опция rotate просто посмотрим на результат ее работы при rotate : false,

Ну и самое вкусное я оставил  напоследок: плагин способен анимировать искривление текста

jQuery(function(){
	$('#example1').arctext({radius	: 100, dir	: 1}); // важно инициировать плагин до анимаций
	$('input.btn1').click(function(){
		$('#example1').arctext('set', { // а уже потом производить анимацию
			radius		: 100, 
			dir		: -1,
			animation	: {
				speed	: 300,
				easing  : 'ease-out'
			}
		});
	})
}

ТЕКСТ ПРИВЛЕКАЮЩИЙ ВНИМАНИЕ XDAN.RU

Анимируется оно не при помощи jQuery.animate, а по средствам CSS3 Animation, поэтому callback'ов тут нет. Сделать что-нибудь динамичное Вам поможет старый добрый setInterval

jQuery(function(){
	$('#example2').show().arctext({radius:-1});
	var k = 1;
	setInterval(function(){
		$('#example2').arctext('set', {
			radius		: 350,
			dir			: k,
			animation	: {
				speed	: 100,
				easing  : 'ease-out'
			}
		});
		k*=-1; // меняем направление анимации
	},3000);
});

Тест вращается и не вращается

Протестировал в Chrome 19, FireFox 12, IE9, Opera 12  

Оставлять комментарии могут только зарегистрированные пользователи