Выпадающий текст с помощью CSS и JQuery

Эффект выпадания букв создан с помощью CSS и JQuery. Этим оригинальным способом можно разнообразить любой текст на вашем сайте.

Я думаю, что можно создать этот же эффект на чистом CSS, но этот метод более интересен.

HTML

<h1>Wordpress-club.com</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 font-size: 100%;
 background: #EEEEEE;
 text-align: center;
}

h1 {
 margin: 0;
 padding: 0;
 font-family: 'Raleway';
 font-weight: 400;
 font-size: 2.4em;
 color: #9A12B3;
}

.letterDrop {
 position: relative;
 top: 0.60em;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 0.5em;
 opacity: 0.8;
 transform: rotateX(-90deg);
 animation: letterDrop 1.2s ease 1 normal forwards;
}

@keyframes letterDrop {
 10% {
 opacity: 0.5;
 }
 20% {
 opacity: 0.8;
 top: 3.75em;
 transform: rotateX(-360deg);
 }
 100% {
 opacity: 1;
 top: 4.50em;
 transform: rotateX(360deg);
 }
}

span:nth-child(2n) {
 color: #663399;
}

JS

jQuery.fn.letterDrop = function() {
 var obj = this;

 var drop = {
 arr : obj.text().split( '' ),

 range : {
 min : 1,
 max : 9
 },

 styles : function() {
 var dropDelays = '\n', addCSS;

 for ( i = this.range.min; i <= this.range.max; i++ ) {
 dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }\n';
 }

 addCSS = $( '<style>' + dropDelays + '</style>' );
 $( 'head' ).append( addCSS );
 },

 main : function() {
 var dp = 0;
 obj.text( '' );

 $.each( this.arr, function( index, value ) {

 dp = dp.randomInt( drop.range.min, drop.range.max );

 if ( value === ' ' )
 value = '&nbsp';

 obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' );

 });

 }
 };

 Number.prototype.randomInt = function ( min, max ) {
 return Math.floor( Math.random() * ( max - min + 1 ) + min );
 };

 // Create styles
 drop.styles();

 // Initiate
 drop.main();

};

$( 'h1' ).letterDrop();