« Previous Demo: Sliding Image Panels with CSS3 Back to the Codrops Article

Arctext.js

Curving text with CSS3 & jQuery

Curve Direction No rotation Set/animate

Just ♦ bend ♦ your ♦ text

ABCDEFG

I wanna be curved

Example 1 - Curve

Curved with a radius of 300

$example1.arctext({radius: 300})

I wanna be different

Example 2 - Direction

Changed direction

$example2.arctext({radius: 400, dir: -1})

I have straight letters

Example 3 - No rotation

Non-rotated letters

$example3.arctext({radius: 500, rotate: false})

See me change

Example 4 - Set/animate

Set or animate

$example4.arctext({radius: 300})

Set meradius: 140,
dir: -1 Animate meradius: 300,
dir: -1,
animation: 300ms ease-out Animate meradius: 200,
dir: 1,
animation: 300ms Reset meradius: 300,
dir: 1