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:
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: https://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à.
[dm]26[/dm]
