jquery uses CSS3 to implement text animation effects plug-ins textillate.js

textillate is a jquery-based Compact plug-in that uses CSS3 to implement text animations. Textillate.js integrates some great JavaScript libraries that use CSS3 animations, and you can very lightly and easily apply them to any text in your Web page.

textillate Download Case Demo How to use

Introducing Core Files

<href= "Assets/animate.css"  rel= "stylesheet"> <  src= "Http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></ Script > <  src= "Assets/jquery.lettering.js"></script  >

Building HTML Tags

<class= "TLT">My Title</H1>

Write JS, initialize

$ (function  () {    $ ('. Tlt '). Textillate ();})

The above code uses the default animation effect, if you want to change the effect of the action, you can call the data API in HTML

<class= "TLT"  data-in-effect= "RollIn">Title  </H1>

You can also use parameters when initializing to change

in: {effect: ' RollIn '}});

Of course, you can also use Textillate to animate a list of text

<H1class= "TLT">    <ulclass= "Texts">        <LiData-out-effect= "FadeOut"Data-out-shuffle= "true">Some Title</Li>        <LiData-in-effect= "FadeIn">Another Title</Li>    </ul></H1>$ ('. Tlt '). Textillate ();

Note: You can control the animation effect for each Li by invoking the data API to configure animation parameters.

parameter Options

$ ('. Tlt ')). Textillate ({//The default selector to if detecting multiple texts to animateSelector: '. Texts ',  //Enable loopingLoopfalse,  //sets the minimum display time for each text before it is replacedmindisplaytime:2000,  //sets the initial delay before starting the animation  //(Note that depending, on the effect, need to manually apply  //Visibility:hidden to the element before running this plugin)initialdelay:0,  //set whether or not to automatically start animatingAutoStart:true,  //custom set of ' in ' effects. This effects whether or not the  //character is Shown/hidden before or after an animationineffects: [],//custom set of ' out ' effectsOuteffects: [' Hinge ' ],  //In animation settings  inch: {    //set the effect nameEffect: ' Fadeinleftbig ',    //set the delay factor applied to each consecutive characterdelayscale:1.5,    //set the delay between each characterDelay:50,    //set to True to animate all the characters at the same timeSyncfalse,    //randomize the character sequence    //(note that shuffle doesn ' t do sense with sync = true)Shufflefalse,    //reverse the character sequence    //(note that reverse doesn ' t do sense with sync = true)Reversefalse,    //callback that executes once the animation have finishedCallbackfunction () {}  },  //Out animation settings.Out : {effect:' Hinge ', Delayscale:1.5, Delay:50, Sync:false, Shuffle:false, Reverse:false, Callback:function () {}  },  //callback that executes once textillate have finishedCallbackfunction() {}});

Events

• Start.tlt–textillate triggered at start
• inanimationbegin.tlt– animation enters the start trigger
• inanimationend.tlt– animation enters the end of the trigger
• outanimationbegin.tlt– when animation exits start
• outanimationend.tlt– triggers when an animation exits at the end
• End.tlt–ttextillate End Trigger

Method

• $element. Textillate (' Start ') – Manually start or restart Textillate
• $element. Textillate (' Stop ') – Manually pause or stop textillate
• $element. Textillate (' in ') – triggered when the current text animation enters
• $element. Textillate (' out ') – triggered when the current text animation exits

jquery uses CSS3 to implement text animation effects plug-ins textillate.js