BHAUKAL

  Animating typefaces | One frame at a time

QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM

                
// Animate all the letters in the DIV
animateAll = function(c,n){
    if (n==25) return false;
    $(c).css("font-family", "Raleway-f" + n);
    $(c).css("opacity", (n * (100/12)) / 100);
    setTimeout(function(){
        animateAll(c, n+1);
    }, 44)
}
animateAll("#kebabs", 1)
Run Code
KEBABS

                
// Append & Animate the letter One-by-One
animateOneByOne = function(c,t){
    as = t.split("");
    $(c).html("");
    for(a in as){
        $(c).append("<span id='bh-"+a+"'>"+as[a]+"</span>");
        $('#bh-'+a).css("opacity", 0)
        setTimeout(animateAll, a*1000, "#bh-"+a, 1)
        console.log(as[a])
    }
}
Run Code
GOMTI