Per chi non avesse intuito, o magari non lo ha mai visto, l'effetto FADE è quell'effetto di cambio del colore di sfondo in modo graduale, per comprendere al meglio le potenzialità di questo effetto bisogna solamente dare un occhiata all'esempio, che trovate a questo LINK.
Ora questo è effetto è stato creato da Adam Michela tramite l'utilizzo di fogli di stile (CSS) e JavaScript.
Per prima cosa creiamo il foglio di stile per definire il blocco a cui verrà applicato l'effetto FADE. Noi semplicemente lo abbiamo definito così:
Come, spero, tutti voi sapiate la porzione di codice precedente va inserita nell'HEAD del foglio HTML!!
Ora inseriamo il nostro file
javascript, che compierà tutto il lavoro, per darci l'effetto FADE.
Per fare ciò ci basta inserire nella pagina il richiamo al file fad.js
che noi avremo salvato nella stessa cartella.
Questo è il richiamo da inserire prima del TAG di chiusura </HEAD>:
Ecco qui di seguito il file fad.js, per ottenerlo copiate l'interno della textarea in note pad e poi salvate il tutto come fad.js!:
Arriviamo ora al punto finale, come avete potuto vedere dall'esempio l'effetto è applicato sullo sfondo del blocco, al cui interno sarà sicuramente presente del testo.
Per creare questo blocco inseriamo, dove vogliamo, questa parte di codice:
Come potete vedere abbiamo inserito l'id "mess", che sarebbe relativo al foglio di stile inserito all'inizio, e poi abbiamo definito la classe "fade-F4F4F4". Nella classe il "fade" è necessario per richiamare l'attenzione dello script poi subito dopo inseriamo il codice HEX del colore iniziale che poi sfuocherà nel colore dello sfondo originale.
Mi spiego meglio, come vedete il colore di sfondo, definito dal foglio di stile è #99FF66 (colore: ), il colore definito nella classe è #F4F4F4 (colore: ). Quindi il nostro risultato sarà uno cambio di colore sfuocando dal grigio al verde.
Potete quindi modificare a piacere i colori, l'unica accortezza da tenere è quella di non inserire nella classe il cancelletto del colore esadecimale, cioè il "#". Per chi già mastica i fogli di stile e JavaScript sarà uno scherzo personalizzare questo effetto!
Ecco l'esempio clicca sul link per visualizzarlo --> Esempio Effetto FADE
