Di recente mi sono imbattuto in questo sito, dove il colore di sfondo cambia con un effetto fade., e ho voluto scoprire cosa c’era dietro.
Dietro a quell’effetto c’è il plugin jQuery Pulse, che con pochi semplici passi ti permette di realizzare l’effetto che hai visto nel sito.
Con questa breve guida, invece voglio spiegarti come realizzare la stessa animazione senza l’utilizzo di plugin.
Metodo .animate()
Utilizzeremo il metodo animate(), già affrontato in passato per ottenere un effetto fade animato, con il quale cambieremo il colore di sfondo.
Dovrai prima richiamare tra i tag head le librerie jQuery e jQuery UI.
Poi dovrai applicare al tag body il metodo animate per quattro volte se vorrai cambiare il colore di sfondo quattro volte:
setInterval(function() {
$('body')
.animate({ backgroundColor: "#9a5342" }, 3000)
.animate({ backgroundColor: "#fffc0c" }, 3000)
.animate({ backgroundColor: "#e46d00" }, 3000)
.animate({ backgroundColor: "#ff3506" }, 3000);
},100);
Come puoi vedere le varie animazioni, sono incluse dentro la funzione setInterval(), il cui compito è quello di ripetere ciclicamente le animazioni.
Nelle animazioni in particolare viene cambiata la proprietà del colore di sfondo (backgroundColor), e impostata la durata dell’effetto.
Con questa tecnica potrai animare non solo lo sfondo, ma qualsiasi elemento della pagina, dove basterà mettere al posto del body ( $(‘body’) ), l’elemento sul quale fare l’animazione, e potrai cambiare la proprietà da animare.
Per qualsiasi dubbio chiedi pure nei commenti 
26 luglio 2012 at 17:12
Banale.. ma di sicuro effetto!
26 luglio 2012 at 17:12
P.s: perchè fai includere anche le librerie jQuery UI?
26 luglio 2012 at 17:20
Ciao Riccardo,
la includo per poter estendere le funzionalità di animate proprio per animare il colore, come puoi leggere nella nota qui.
26 luglio 2012 at 17:23
Ottimo, pensavo che la proprietà fosse inclusa nativamente, bel lavoro è davvero un ottimo effetto con poche righe di codice, molte volte uno non ci pensa ma talvolta le cose più semplici sono le migliori
3 agosto 2012 at 12:03
fede scusami, ho un problema:
ho creato un effetto ‘animate’ come questo:
$(“.collectionsclick”).click(function () {
$(“#about”).animate({ “top”: “-600px” }, 1000);
$(“#corporate”).animate({ “top”: “-600px” }, 1000);
$(“#contacts”).animate({ “top”: “-600px” }, 1000);
$(“#store”).animate({ “top”: “-600px” }, 1000);
$(“#collections”).animate({ “top”: “180px” }, 1000);
});
in tutto sono 5 sezioni, quindi ripeto questo codice 5 volte per ogni rispettivo ‘elemento’ . ora vorrei che ad ogni elemento ‘clickato’ nn solo si creerebbe questo effetto citato ma che ogni sezione ha un suo sfondo.
Come posso implementare questo codice da te creato??
14 ottobre 2012 at 16:23
Che dire … JQuery non finisce mai di stupirmi !
2 novembre 2012 at 17:27
Ciao a tutti.. sto facendo un restyling al mio sito web ed ho previsto l’utilizzo di questo script..
Dai test ripetuti che ho fatto pare che questo pulse funzioni male su SAFARI e CHROME… ovvero il fade dello sfondo è macchinoso e scrollando la pagina del sito si taglia letteralmente il colore… qualcuno avrebbe la soluzione?
Grazie in anticipo