Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Textillate.js - Animate Text With CSS3

by Durodola Ridwan | Saturday, April 12, 2014 | | 7 Comments

Textillate.js is an amazing jQuery plugin that creates stunning CSS3 text animation. Although, there are some other jQuery plugins linke Animate.css that lets you animate text, but it only animated wholly, not letter by letter. With Testillate.js, you can easily animate your text the way you want. It provides animation effects such as flash, bounce, shake, swing, flip and more.


Textillate.js needs a few dependencies before it is ready for use. They are Animate.css, Lettering.js and jQuery. After you’ve got the files downloaded, include them in your project, like so:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>

And also include the Animate.css library in the head section.

<link href="css/animate.css" rel="stylesheet">

Textillate.js uses in and out animation. You may apply them with different animations, separately. All the animation effects use Animate.css library effects. Also note that this plugin works only on text that contain elements, so any element that is not text will not be animated.

Now, we want to animate a simple text, like so:

<div class="tlt">
    <p>Each letter will animate.</p>
</div>

We then call the class name in our JS.

<script>
$(function () {
    $('.tlt').textillate();
})
</script>

The above code will apply only default animation setting to the text. To change the defaults, you can either use the html data api:

<div class="tlt" data-in-effect="rollIn">
    <p>Each letter will animate.</p>
</div>

or pass in options on initialization:

$('.tlt').textillate({ in: { effect: 'rollIn' } });

data-in-effect defines the entrance effect of the text. While for the exit effect, you can use data-out-effect api.

You can also tell textillate.js to animate a list with the following markup:

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li> 
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
</h1>

$('.tlt').textillate();

Notice that you can control the animation parameters on each text (<li>) using the data api. And for more enhancements, you can combine Textillate.js with another plugin like FitText.js for gigantic display text.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

7 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. iOS 10 is the tenth major release of the iOS operating system developed by Apple Inc., being the successor to iOS 9.iOS 10 improves and adds upon user experience system-wide including 3D Touch expansion, an updated lock screen, and "widget" support.
    To download Latest IOS version "IOS 10" and its Jailbreak free from CydiaNerd.

    ReplyDelete
  2. This blog is so nice to me. I will continue to come here again and again. Visit my link as well. Good luck
    temple run 2

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger