#drop effect

[animatedtextmaker]

Instructions how to create a text with the effect of dripping drops of juice engfto.com

[animatedtextmaker]

Slime goo logo text animated drop effect engfto.com

[animatedtextmaker]

Milk chocolate drop animated effect logo maker engfto.com

[animatedtextmaker]

Slime drop cool animation text logo effect make on engfto.com

[animatedtextmaker]

Cool drop juice text logo effect engfto.com

[animatedtextmaker]

Text logo goo drop effect maker engfto.com

[htmluse]

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

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