Traiin Station Text Effect

by Justin

HTML

<div class="animate"> La Borsa è chiusa</div>

CSS

.animate  {
    font-size:43px;
    padding:89px 0px 29px;
    text-align:center;
    text-transform:uppercase;
    line-height:80px;
    word-spacing:20px;
    overflow:hidden;
}

.animate span {
    width:49px;
    height:47px;
    color:#fff;
    background:#ccc;
    text-align:center;
    line-height:47px;
    display:inline-block;
    text-shadow: 1px 1px 1px #294263;
}

.animate span.nobg {
    background:none;    
}

JavaScript

var str = ('The quick brown fox jumps over the lazy dog').toUpperCase();
    var symtype=new Array(" ","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
    
    var symarray=new Array();
    
    for (var i=0; i<str.length; i++){ symarray[i]=" "; }
    
    function scroll(){
        for (var i=0; i<str.length; i++){
            if (symarray[i]!=str.substring(i,i+1)) {
                for (var x=0; x<symtype.length; x++) {
                    if (symarray[i]==symtype[x]) {
                        symarray[i]=symtype[x+1]; 
                        break;
                    }
                }
            }
        }
        
        $('.animate').find('span').each(function(index, element) {
            $(this).html(symarray[index]);
        });
    
        setTimeout(scroll,100);
    
    }

$(document).ready(function() {
    
    var newSrt = '';
    for (var i=0; i<str.length; i++) {
        if (str[i] != ' ') {
            newSrt += '<span>'+str[i]+'</span>';
            //newSrt += '<span> </span>';
        } else {
            newSrt += '<span class="nobg">'+str[i]+'</span>';
            //newSrt += '<span class="nobg"> </span>';
        }
    }
    $('.animate').html(newSrt);
    

    scroll();

    
});