#letter effect

Effets de texte animé pour compositeur visuel

Animated Text Effects for Visual Composer<a class="prixcodecanyon" Prix : <a class="prix" Prix : 10$ et <a class="ventes" Prix : 119 ventes Donnez vie à votre site avec Text Effects pour Visual Composer. Ce nouvel élément Text Effect est parfait pour les rubriques qui attireront sûrement l'attention de vos visiteurs instantanément. Choisissez parmi ces effets uniques et élégants qui modifient…

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

;