Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

Jul 28, 2010

Typography Animation using Jquery

Today i am here with a cool idea of typography type animation. we will learn what is it, and how to create it with Jquery and CSS. This can be ussed as a typography animation software too. You just have to pass your text as a HASH to convert that as a kinetic typography animation.
In this tutorial we will learn to how to apply jquery animate opacity and more. And at last you will fall in love with it.

Idea

 

If you are not a new one on my blog, you must know about the DreamNight Animation. In this tutorial i am changing the Dreams into the given text in Hash(#). Let's see how this idea came true.

How it Works?

This code works in some simple steps listed bellow -
1. generating radom colored text(text from HASH)
2. adding it to body on the fly
3. Grow it in size and
4. Fade it out.

Code

CSS

 body{
   background:black;
   overflow:hidden;
   font-family:Cambria,....;
   }
.typoText { 
   position:absolute;
   top:-50px; 
   left:-50px;
}
Javascript / JavaScript

function typo(){
  //generating Random rgb colors; 
  var color = 'rgb('+Math.floor(Math.random()*255)+','+
                      Math.floor(Math.random()*255)+','+
                      Math.floor(Math.random()*255)+')';
 //generating random position X and Y according to window size
  var x = Math.floor(Math.random()*($(window).width() - 200));
  var y = Math.floor(Math.random()*$(window).height());
 
var text = '';
//Getting text from the HASH 
if(window.location.hash) {   
     text = (window.location.hash).substring(1);
} else {
//if there is no HASH  
     text = 'Typography Animation using Jquery';
}

//generating TypoText
TypoText = $('<span>').
             html("<b ">"+text+"</b>").
             attr({class: 'typoText'}). 
             hide();//appending TypoText to BODY-->Apply Style-->Animate-->Fade
$(document.body).append(TypoText);
          TypoText.
          css({ 
                  'color':color,
                   top: y,    //offsets
                   left: x //offsets
                 }). 
          show().
          animate({
                    fontSize:'200px',
                    opacity: 0.2,
                    top: y-200,    //offsets
                    left: x-200
                   }, 833 * 5). 
          fadeOut(833 * 10);
       
//Calling Typo after particular time     
 window.setTimeout('typo()',833);
 }

$(document).ready(function() {    
    //Calling Typo First time   
     typo();
});
 

DEMO


You can see the working demo here.
You can also Create Typography Animation For Any text Here

Labels: , , ,




By :