Värin vaihtava tausta rullalla

 Työskennellessään projektia (ilmoitamme pian!) Suunnittelutiimimme halusi mukavan väriä vaihtavan taustan. Nyt tiedämme, että olisimme voineet käyttää staattista kaltevuutta tai yksinkertaisesti haalistua osioiden välillä, mutta ajattelimme, että olisi hienoa, jos tausta muuttuisi käyttäjän vierittäessä sivua alaspäin kiinteällä tavalla. Yleensä kun kohtaamme tällaisen haasteen, tarkistamme ensin, onko joku muu jo tehnyt sen, emmekä löytäneet tätä jsfiddlea hetkessä: http://jsfiddle.net/cgspicer/V4qh9/. Se on hienoa, mutta tarvitsimme vähän enemmän. Nykyinen versio tukee vain haalistumista kahden värin välillä, joten haaroitimme koodia ja laajensimme sitä hieman.

asentaminen

Jos haluat käyttää tätä menetelmää seuraavassa projektissasi, tarvitset jQuery, jquery.color-2.1.0.js, ja tähän jsfiddleen sisältyvät HTML/CSS/JS-bitit: https://jsfiddle.net/jguffey/mxkx9j2o/.

Tee se itse

Viuluissa käytämme ` `elementit merkitsevät sisältörajat, mutta voit käyttää mitä tahansa haluamaasi elementtiä muuttamalla valitsinta rivillä 8 sekä vastaavaa CSS: ää ja HTML: ää. Merkkijonoryhmä kutsussa "scrollColors" (rivi 16) on paikka, johon tallennamme värit, joihin haluaisimme siirtyä. Muista vaihtaa rungon CSS-taustaväriominaisuus (värinmuutoskohteemme) vastaamaan tämän taulukon ensimmäistä elementtiä, muuten saat kirkkaan vaaleanpunaisen värin, kun sivu ladataan ensimmäisen kerran.

jQuery Color -laajennuksen ansiosta hex-, rgb- ja jopa rgba-arvot ovat sallittuja. Tämä voi tuottaa hienoja tehosteita, kun kerrostetaan kuvan tai videon päällä. RGBA:n alfakanava on animoitu aivan kuten muutkin värikanavat, joten voit saada myytyä värinmuutosopasiteetin rullauksella.

Enjoy!