Fw

Wordpress Creative Developer

Guida jQuery – Animazione del Colore di Sfondo

  • Tutorial Jquery
  • -

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.

Guida jQuery - Effetto Fade Colore di Sfondo

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 😉

11 Commenti

  1. Banale.. ma di sicuro effetto!

  2. P.s: perchè fai includere anche le librerie jQuery UI?

    • Ciao Riccardo,

      la includo per poter estendere le funzionalità di animate proprio per animare il colore, come puoi leggere nella nota qui.

      • 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. 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??

  4. Che dire … JQuery non finisce mai di stupirmi !

  5. 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

  6. Evvabene ragazzi … testiamo anche questa va ! 😉 Ottimo articolo, utile per tutti i professionisti web master e web designer ! Ciaooo 😉

  7. Bellissimo esempio…. Io ho un problema essendo nuovo il mondo jquery vorrei capire come scaricare la libreria visto che il link indicato non funziona…
    Aiutatemi per favore!!! Grazie.

  8. Ciao, salve a tutti, volevo solo chiedere se c’è un metodo simile per creare un fade tra immagini di sfondo, perchè ho visto che non basta sostituire il backgroundColor con un background-image (proprietà css).

    • mi correggo, quale equivalente della proprietà css (background-image) si richiama in jquery? Funzionerebbe ugualmente?

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *