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

;

$( ‘h1′ ).letterDrop();

Letter Drop – jQuery Plugin for Letter Drop Effect