Create CSS3 text animation using textillate.js

Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. You can use this awesome library to create text animation on your web page to make it more dynamic and fancy. It is very easy to use just Simply include textillate.js and it’s dependencies in your project to start creating unique effects.
text-animation-jquery-plugin


Let’s start with the basic example..

First include all required libraries..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.textillate.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<h1 class="title">Rohit Kumar</h1>

Add textillate function to apply text animation on title class.

$(function () {
    $('.title').textillate();
})

Above will animate using the default options. To change the defaults, you can either use the html data api.

<h1 class="title" data-in-effect="rollIn">Rohit Kumar</h1>



Or Using jquery pass in options on initialization

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

See full list of animation and download source code from official website.

DEMO

DOWNLOAD

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.