ARCTEXT.JS – CURVING TEXT WITH CSS3 AND JQUERY

By | July 19, 2012
0
0



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 that let’s you do exactly that. 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.

VIEW DEMO                DOWNLOAD SOURCE

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 that let’s you do exactly that. 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.

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 (hence arc) 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.

OPTIONS:

The following options are available:

radius  : 0,   

// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.
 
dir     : 1,   
// 1: curve is down,
// -1: curve is up
 
rotate  : true,
// if true each letter should be rotated.
 
fitText : false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

 

Leave a Reply

Your email address will not be published. Required fields are marked *