letter by letter

by lovromar

HTML

<h1 id="wrapper"><span>L</span><span>o</span><span>r</span><span>e</span><span>m</span></h1>

CSS

h1 {
    text-align: center;
    font: normal 3em Arial, sans-serif;
    width: 10em;
    height: 2em;
    position: relative;
    margin: 1em auto;
}

h1 span {
    position: absolute;
    width: 2em;
    height: 2em;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 2;
    border-radius: 50%;
}
span:nth-child(1) { left: 0; }
span:nth-child(2)  { left: 2em; }
span:nth-child(3) { left: 4em; }
span:nth-child(4) { left: 6em; }
span:nth-child(5) { left: 8em; }

JavaScript

var animateChars = function() {

    var positions = [];
    var delay = 0;

    $('span', '#wrapper').each(function(i) {
        positions[i] = $(this).position().left;
    });

    $('span', '#wrapper').css('left', '-1000em');

    $('span', '#wrapper').each(function(i) {

        var $span = $(this);

        $span.queue('chars', function(next) {


            $span.delay(delay).animate({
                left: positions[i]
            }, 1000, next);

        });

        $span.dequeue('chars');
        
        delay += 500;

    });
};

animateChars();