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.
Installation
Hvis du gerne vil bruge denne metode til dit næste projekt, skal du bruge det jQuery, jquery.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!
Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? 😉
Vær venlig at 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.
