Arctext.js – Curving Text with CSS3 and jQuery

Arctext is a jQuery plugin, allowing the developer to create curving text effects easy.

Curving Text with CSS3 and jQuery

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path.

Arctext.js is a jQuery plugin to do this easier. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

arc-text

How it works

The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. The curve is always a segment of a circle, for which the radius can be specified. The space and rotation for each letter will be calculated using that radius and the width of the text.

Samples:

// simple usage
$example.arctext({radius: 400, dir: -1})

More:

http://tympanus.net/Development/Arctext

Download Arctext.js curving text plugin:

http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1
 
Tags:, ,