LOVE Text Effect
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 = [
"Cameron Cashwell Consulting",
];
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( this.output.join( '' ) );
},
shuffle: function( a, b ) {
return Math.random() - 0.5;
}
};
var $container = $( '#container' );
var counter = 0;
var queue = phrases.concat();
function update() {
if ( !queue.length ) {
queue = phrases.concat();
}
var typer = new Typer();
typer.type( queue.pop() );
$container.prepend( typer.domElement );
if ( counter++ < 2 ) {
setTimeout( update, 1500 );
}
}
update();