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.

innhold[Forestilling]
 

fargerull

Installere

Hvis du vil bruke denne metoden til ditt neste prosjekt, trenger du jQueryjquery.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!

 

om forfatteren
Forfatter: super~~POS=TRUNC

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

 

hvem er vi?

CollectiveRay drives av David Attard - som jobber i og rundt webdesignnisjen i mer enn 12 år, gir vi nyttige tips for folk som jobber med og på nettsteder. Vi driver også DronesBuy.net - et nettsted for dronehobbyister.

David attard

 

 

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...