Mentre lavorava a un progetto (lo annunceremo presto!), Il nostro team di progettazione desiderava uno sfondo che cambiasse colore. Ora, sappiamo che avremmo potuto usare un gradiente statico, o semplicemente sfumare tra le sezioni, ma abbiamo pensato che sarebbe stato bello se lo sfondo fosse cambiato mentre l'utente scorreva la pagina, in modo fisso. Di solito quando incontriamo una sfida come questa, la prima cosa che facciamo è controllare se qualcun altro l'ha già fatto, e in pochissimo tempo abbiamo trovato questo jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. È fantastico, ma avevamo bisogno di un po 'di più. La versione corrente supporta solo le dissolvenze tra due colori, quindi abbiamo biforcato il codice e ampliato un po '.
Installazione
Se desideri utilizzare questo metodo per il tuo prossimo progetto, ti servirà jQuery, jquery.color-2.1.0.jse le parti di HTML / CSS / JS incluse in questo jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.
Rendere il proprio
Nel violino, usiamo ` `per contrassegnare i confini del contenuto, ma puoi usare qualsiasi elemento tu voglia cambiando il selettore sulla riga 8 e il CSS e l'HTML corrispondenti. L'array di stringhe nella chiamata a `scrollColors` (riga 16) è dove memorizziamo i colori a cui vorremmo passare. Ricorda di cambiare la proprietà CSS background-color per body (il nostro obiettivo di cambio colore) in modo che corrisponda al primo elemento in questo array, o otterrai comunque il colore rosa brillante quando la pagina viene caricata per la prima volta.
Grazie al plug-in jQuery Color, sono consentiti valori esadecimali, rgb e persino rgba. Questo può produrre alcuni effetti interessanti se sovrapposto a un'immagine o un video. Il canale alfa in RGBA è animato proprio come gli altri canali di colore, quindi potresti avere un'opacità del cambio di colore venduto con lo scorrimento.
Buon divertimento!
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...