Colore che cambia sfondo su scorrimento

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

Contenuti[Mostra]
 

scorrimento colori

Installazione

Se desideri utilizzare questo metodo per il tuo prossimo progetto, ti servirà jQueryjquery.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!

 

L'autore
Autore: Super User

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un 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.

 

chi siamo noi?

CollectiveRay è gestito da David Attard - lavorando dentro e intorno alla nicchia del web design da più di 12 anni, forniamo suggerimenti utili per le persone che lavorano con e sui siti web. Gestiamo anche DronesBuy.net, un sito Web per appassionati di droni.

David attard

 

 

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...