Litabreytingar bakgrunnur á flettu

 Þegar við vorum að vinna að verkefni (Við munum tilkynna það fljótlega!) Vildi hönnunarteymið okkar fá fallegan litabreytingar bakgrunn. Nú vitum við að við hefðum getað notað kyrrstöðu, eða einfaldlega dofnað á milli hluta, en við héldum að það væri flott ef bakgrunnurinn breyttist þegar notandinn fletti niður síðuna, á fastan hátt. Venjulega þegar við mætum áskorun sem þessari er það fyrsta sem við gerum að athuga hvort einhver annar hafi þegar gert það og á engum tíma fundum við þennan jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. Það er frábært en við þurftum aðeins meira. Núverandi útgáfa styður aðeins dofna á milli tveggja lita svo við punguðum kóðanum og stækkuðum aðeins á honum.

Uppsetning

Ef þú vilt nota þessa aðferð fyrir næsta verkefni þarftu jQuery, jquery.color-2.1.0.js, og bitar HTML / CSS / JS sem fylgja þessum jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.

Gerðu það að þínu eigin

Í fiðlu notum við ` `þætti til að merkja innihaldsmörkin, en þú getur notað hvaða þætti sem þú vilt með því að breyta valtakkanum á línu 8 og samsvarandi CSS og HTML. Fjöldi strengja í kallinu til 'scrollColors' (lína 16) er þar sem við geymum litina sem við viljum fara yfir í. Mundu að breyta CSS bakgrunnslitareiginleikanum fyrir meginmálið (litabreytingarmarkmiðið okkar) til að passa við fyrsta þáttinn í þessu fylki, annars færðu enn skærbleikan lit þegar fyrst byrjar á síðunni.

Þökk sé jQuery Color viðbótinni eru hex, rgb og jafnvel rgba gildi leyfð. Þetta getur skilað svölum áhrifum þegar það er lagað yfir mynd eða myndband. Alfarásin í RGBA er hreyfð rétt eins og aðrar litarásir, þannig að þú gætir haft selda litbreytingargagnsæi með skrun.

Njóttu!