Farveskiftende baggrund på rulle

 Mens vi arbejdede på et projekt (Vi annoncerer snart!), Ville vores designteam have en flot farveændrende baggrund. Nu ved vi, at vi kunne have brugt en statisk gradient eller simpelthen falmet mellem sektioner, men vi troede, at det ville være sejt, hvis baggrunden ændredes, da brugeren rullede ned på siden på en fast måde. Normalt når vi møder en udfordring som denne, er den første ting, vi gør, at kontrollere, om nogen andre allerede har gjort det, og på ingen tid fandt vi denne jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. Det er fantastisk, men vi havde brug for lidt mere. Den aktuelle version understøtter kun fades mellem to farver, så vi forked koden og udvidede den lidt.

Indhold[show]
 

farverulle

Installation

Hvis du gerne vil bruge denne metode til dit næste projekt, skal du bruge det jQueryjquery.color-2.1.0.js, og bitene af HTML / CSS / JS inkluderet i denne jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.

Gør den til din egen

I fiolen bruger vi ` `elementer for at markere indholdsgrænserne, men du kan bruge ethvert element, du ønsker, ved at ændre vælgeren på linje 8 og den tilsvarende CSS og HTML. Matrixen med strenge i opkaldet til `scrollColors` (linje 16) er hvor vi gemmer de farver, vi gerne vil overgå til. Husk at ændre CSS-baggrundsfarveegenskaben for body (vores farveændringsmål) for at matche det første element i denne matrix, ellers får du stadig den lyserøde farve, når siden først indlæses.

Takket være jQuery Color-plugin er hex-, rgb- og endda rgba-værdier tilladt. Dette kan give nogle seje effekter, når de lagres over et billede eller en video. Alfakanalen i RGBA er animeret ligesom de andre farvekanaler, så du kan få en solgt opacitet med farveændring ved at rulle.

God fornøjelse!

 

Om forfatteren
Forfatter: Super Bruger

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

 

Hvem er vi?

CollectiveRay drives af David Attard - arbejder i og omkring webdesign -nichen i mere end 12 år, og vi giver tips til mennesker, der arbejder med og på websteder. Vi driver også DronesBuy.net - et websted for drone -amatører.

David attard

 

 

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...