#letter drop effect

New Post has been published on http://www.htmluse.com/letter-drop-jquery-plugin-for-letter-drop-effect/

Letter Drop – jQuery Plugin for Letter Drop Effect

Download   Demo

Letter Drop (jQuery)

jQuery add on for CSS letter drop animation effect. The plugin takes the text string within the defined element and splits each letter out adding a random delay to each from 1.0 to 1.9 secs before dropping and rotating the letters down like rain.

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();

;