Färgbytande bakgrund på rullning

 När vi arbetade med ett projekt (Vi meddelar snart!) Ville vårt designteam ha en fin färgförändrande bakgrund. Nu vet vi att vi kunde ha använt en statisk lutning eller helt enkelt bleknat mellan sektioner, men vi tyckte att det skulle vara coolt om bakgrunden ändrades när användaren rullade ner på sidan, på ett fast sätt. Vanligtvis när vi möter en utmaning som denna är det första vi gör att kontrollera om någon annan redan har gjort det, och på nolltid hittade vi den här jsfiddeln: http://jsfiddle.net/cgspicer/V4qh9/. Det är fantastiskt, men vi behövde lite mer. Den nuvarande versionen stöder bara blekningar mellan två färger så vi gafflade koden och utökade den lite.

Innehåll[Show]
 

färgrulle

Installera

Om du vill använda den här metoden för ditt nästa projekt behöver du jQueryjquery.color-2.1.0.js, och bitarna av HTML / CSS / JS som ingår i denna jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.

Gör det ditt eget

I fiolen använder vi ` `element för att markera innehållsgränserna, men du kan använda vilket element du vill genom att ändra väljaren på rad 8 och motsvarande CSS och HTML. Matrisen med strängar i samtalet till `scrollColors` (rad 16) är där vi lagrar de färger vi vill övergå till. Kom ihåg att ändra egenskapen för CSS-bakgrundsfärg för kroppen (vårt mål för ändring av färg) så att den matchar det första elementet i denna matris, annars får du fortfarande den ljusrosa färgen när sidan laddas först.

Tack vare jQuery Color-tillägget är hex-, rgb- och till och med rgba-värden tillåtna. Detta kan ge några coola effekter när de lagras över en bild eller video. Alfakanalen i RGBA är animerad precis som de andra färgkanalerna, så du kan ha en såld färgförändringsopacitet med bläddring.

Njut!

 

Om författaren
Författare: super~~POS=TRUNC

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.
 

 

Bästa rankade cacheplugin

Gör din webbplats snabbare 

Steg för steg-gratis e-postkurs, hur du får din webbplats att ladda in less än 1 sekund  

 

vilka är vi?

CollectiveRay drivs av David Attard - arbetar i och runt webbdesignnischen i mer än 12 år, vi ger användbara tips för människor som arbetar med och på webbplatser. Vi driver också DronesBuy.net - en webbplats för drönare.

David attard

 

 

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...