Fargebytte bakgrunn på bla

 Mens vi jobbet med et prosjekt (Vi vil kunngjøre snart!), Ønsket designteamet en fin fargeskiftende bakgrunn. Nå vet vi at vi kunne ha brukt en statisk gradient, eller bare falmet mellom seksjoner, men vi trodde det ville være kult hvis bakgrunnen endret seg når brukeren rullet nedover på siden, på en fast måte. Vanligvis når vi møter en utfordring som dette, er det første vi gjør å sjekke om noen andre allerede har gjort det, og på kort tid fant vi denne jsfiddelen: http://jsfiddle.net/cgspicer/V4qh9/. Det er flott, men vi trengte litt mer. Den nåværende versjonen støtter bare fades mellom to farger, så vi forked koden og utvidet den litt.

Installere

Hvis du vil bruke denne metoden til ditt neste prosjekt, trenger du jQuery, jquery.color-2.1.0.js, og bitene av HTML / CSS / JS som er inkludert i denne jsfiddelen: https://jsfiddle.net/jguffey/mxkx9j2o/.

Gjør den til din egen

I fele bruker vi ` `elementer for å markere innholdsgrensene, men du kan bruke hvilket som helst element du vil ha ved å endre velgeren på linje 8 og den tilsvarende CSS og HTML. Utvalget av strenger i samtalen til `scrollColors` (linje 16) er der vi lagrer fargene vi vil overføre til. Husk å endre CSS-bakgrunnsfargeegenskapen for kroppen (vårt fargeendringsmål) for å matche det første elementet i denne matrisen, ellers får du fremdeles den lyserosa fargen når siden først lastes inn.

Takket være jQuery Color-plugin er hex-, rgb- og til og med rgba-verdier tillatt. Dette kan gi noen kule effekter når det lagres over et bilde eller en video. Alfakanalen i RGBA er animert akkurat som de andre fargekanalene, slik at du kan ha en solgt fargeendringsdekking med bla.

Nyt!