El Codi del projecte el tenim a https://github.com/daneden/animate.css i la demo dels efectes la tenim ací. Si volem tindre-ho configurat al nostre projecte web, afegim al head les següents dos línies:
I també el següent codi javascript:
$(function() {
$("#ref").click(function() {
animate(".demo", 'rubberBand');
return false;
});
});
...
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
Podem tenir la paraula "PROVA" amb l'efecte si escrivim:
PROVA
O podem tenir l'efecte sempre repetint-se:
PROVA
Ahir vaig ficar l'efecte al logo de color groc de la web de #Benicass.im per a provar, i funciona a la perfecció encara que tingues un DIV dins d'un altre o d'una classe. Animate.css va de meravella i dóna un toc xulo a les pàgines.
Ací http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/ hi ha un tutorial de com activar-ho amb l'event onClick o onMouseOver.
