jQuery textition Plugin Examples

jQuery plugin for text transitions

CSS3 text transitions

Make your words beautiful

Axis X

Click this text to start textition

Transition occurs on the X axis

$('#axis-x').textition({

 map: {x: 100, y: 0, z: 0}

})

Autoplay

First text

Second text

Third text

$('#autoplay').textition({

 speed: 1,

 animation: 'ease-out',

 map: {x: 200, y: 100, z: 0},

 autoplay: true,

 interval: 1.5

})

Axis Z

First text

Second text

Third text

$('#axis-z').textition({

 speed: 0.5,

 map: {x: 0, y: 0, z: 100},

 perspective: 30

})

Menu buttons

First item
One
Second item
Two
Third item
Three

$('#buttons a').each(function() {

 $(this).textition({

  speed: 0.7,

  handler: 'mouseenter mouseleave'

 })

});

Handler on element

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

The effect will start when the specified CSS property changes value.

CSS3 transitions are effects that let an element gradually change from one style to another.

$('#sliding').textition({

 speed: 0.5,

 animation: 'ease-out',

 map: {x: 0, y: 40, z: 0},

 element: $('#arrow-next')

})