sideroad

jQuery Text Animation Plugin

jQuery Text Animation Plugin is for making custom text animations.

Dual licensed under the MIT or GPL Version 2 licenses.

Requires jQuery ,jQuery Transit.

Supported Browser : Firefox 4.x+, Chrome10+, IE10+, Safari5+, Opera11+, Mobile Safari

Demo

Roll

Normal roll.
You can customize settings.
$("div#demo_roll1").textAnimation({
mode:"roll"
});

$("div#demo_roll2").textAnimation({
mode: "roll",
minsize: 20,
magnification: 30,
fixed: "top",
delay: 15,
stuff: 1.5
});
    

Step

Normal step.
You can customize settings.
                        
$("div#demo_step1").textAnimation({
mode:"step"
});
$("div#demo_step2").textAnimation({
mode:"step",
minsize:20,            //minimum font size[integer]
maxsize:60,            //maximum font size[integer]
upper:false,           //is upper step? [boolean]
onStart:"mouseenter",  //event handler for start animation[Browse jQuery Events]
onFinish:"mouseleave", //event handler for finish animation[Browse jQuery Events]
fixed:"top",           //which fixed top or bottom ["top","bottom"]
stuff:2.2,             //font stuff quantity[float]
delay:200,             //delay time for animation between characters[integer] 
interval:0,            //interval time for between animation[integer]
duration:1000           //animation duration time[integer]
repeat:false           //repeat animation[boolean]
});
    

Highlight

Normal highlight.
You can customize settings.
$("div#demo_high1").textAnimation({
mode:"highlight"
});
$("div#demo_high2").textAnimation({
mode:"highlight",         
baseColor:"#111111",      //base font color 
highlightColor:"#2FFF5F", //highlight font color
onStart:"mouseenter",     //event handler for start animation[Browse jQuery Events]
onFinish:"mouseleave",    //event handler for finish animation[Browse jQuery Events]
delay:35,                 //delay time for animation between characters[integer] 
interval:0,               //interval time for between animation[integer]
duration:100              //animation duration time[integer]
repeat:false              //repeat animation[boolean]
});
    

Jump

Normal jump.
You can customize settings.
                     
$("div#demo_jump1").textAnimation({
mode:"jump"
});
$("div#demo_jump2").textAnimation({
mode:"jump",         
altitude:10,              //jump altitude[integer] 
bound :false,             //bound animation[boolean]
onStart:"mouseenter",     //event handler for start animation[Browse jQuery Events]
onFinish:"mouseleave",    //event handler for finish animation[Browse jQuery Events]
fixed:"bottom",           //which fixed top or bottom ["top","bottom"]
delay:80,                 //delay time for animation between characters[integer] 
interval:0,               //interval time for between animation[integer]
duration:400              //animation duration time[integer]
repeat:false              //repeat animation[boolean]
});
    

Download

Downloadgithub

Comment