LOVE Text Effect

by secretgspot

HTML

<div id="container"></div>

CSS

html, body {
    background: #222;
    color: #fff;
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

.quote {
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    margin: 20px;
}

JavaScript

var phrases = [
    "the installation unidisplay offers an examination of semiotics and the laws of perception. the work operates with a number of modules of different visual effects that interfere with the viewers' perception, through optical illusion, jitter, flicker, after-image, movement, complementary colour effect, and so on",
    "2500 feet can loop pays tribute to the 1970s german experimantal rock band legend can. in the plexiglass display box one single loop with recorded music of the is rolled out to its total length of 2500 feet.",
    "the installation consists of a parachute inflated by a wind-machine, creating an ephemere situation of interaction between states of stability and instability. the set-up serves as a methaphor of the ambiguous and discontinuous interplay of artificially produced objects and natural elements."
];

var Typer = function( text ) {
    
    this.proxy = $({n:0});
    this.pointer = 0;
    this.order = null;
    this.output = null;
    this.letters = null;
    this.domElement = $( '<span class="quote">' );
};

Typer.prototype = {
    
    type: function( text ) {

        this.letters = text.split('');
        this.pointer = 0;
        this.output = [];
        this.order = [];
        
        for ( var i = 0; i < text.length; this.order.push(i++) ) {}
        this.order.sort( this.shuffle );

        this.proxy.animate({
            n: 1.0
        },{
            easing: 'easeInOutExpo',
            duration: 4000,
            step: $.proxy( this.step, this )
        });
    },
    
    step: function( now, fx ) {
        
        var i = Math.floor( now * this.letters.length );
        
        for (; this.pointer < i; this.pointer++ ) {
            if ( this.order[ this.pointer ] !== null ) {
                var n = this.order[ this.pointer ];
                this.output[n] = this.letters[n];
                this.order[ this.pointer ] = null;
            }
        }
        
        this.domElement.text(...