Instructions how to create a text with the effect of dripping drops of juice engfto.com
seen from Argentina
seen from Germany
seen from Australia
seen from Philippines
seen from United States
seen from Australia
seen from Australia

seen from Australia
seen from China
seen from Netherlands
seen from China
seen from Spain
seen from Hong Kong SAR China
seen from India
seen from Argentina
seen from Russia
seen from Serbia

seen from Serbia
seen from United States
seen from China
Instructions how to create a text with the effect of dripping drops of juice engfto.com
Slime goo logo text animated drop effect engfto.com
Milk chocolate drop animated effect logo maker engfto.com
Slime drop cool animation text logo effect make on engfto.com
Cool drop juice text logo effect engfto.com
Text logo goo drop effect maker engfto.com
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 = ‘ ’;
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();