animate.css

Per un progetto a cui sto lavorando ho avuto la necessità di associare molteplici animazioni CSS3 per un singolo elemento HTML. Come ogni volta che ho una simile esigenza, ho scelto di utilizzare l’ottimo Animate.css di Daniel Eden.

Per utilizzare Animate.css è sufficiente includere il file:

<link rel="stylesheet" href="animate.min.css">

e associare l’animazione all’elemento tramite jQuery:

$('#element').addClass('animated bounceOutLeft');

Nel caso di voler associare all’elemento più animazioni, il codice, diventa inevitabilmente più lungo e complesso:

$('#image').addClass('animated fadeInUpBig');
$('#image').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
 
     event.stopPropagation();
 
     $('#txt').removeClass('animated fadeInUpBig').off().addClass('animated pulse');
 
});

Per “snellire” il codice ho scritto un plugin jQuery che condivido, si chiama Many4One Animations. Permette di associare molteplici animazioni a un elemento richiamando il plugin e passando come parametro un array contenente i nomi delle animazioni che si vuole applicare:

$("#image").many4oneAnimations({  
    animations: ['bounce','flash','flipOutX','flipInX','flipOutY','flipInY','fadeOutUpBig','slideInLeft'] 
});

Qui una demo: http://www.emawebdesign.com/demo/many4one-animations/demo.html

Il plugin è rilasciato sotto licenza MIT, richiede Animate.css e jQuery 1.9.1 (o superiore), lo potete scaricare qui sotto e lo trovate anche sul mio profilo Github.

Spero ti possa tornare utile 😉

Se scarichi e utilizzi il plugin significa che hai letto e dato il tuo assenso alle seguenti condizioni:

– EmaWebDesign non si assume alcuna responsabilità, implicita od esplicita, su eventuali danni provocati dall’uso proprio o improprio di questo script.
– chi utilizza questo script lo utilizza completamente a suo rischio e pericolo assumendosene tutte le responsabilità.

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Many4One Animations (56.87KB)
added: 26/12/2013
clicks: 1419
description: Many animations for one element with Animate.css and jQuery. Version: 1.0

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.