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!
Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? 😉
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!
Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.
