Create CSS3 text animation using textillate.js

text-animation-jquery-plugin

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 Kumarh1>

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 Kumarh1>

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.

Leave a Reply

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

Top