New Post has been published on Html Use
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
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.
@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;
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 = ‘ ’;
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();
