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 hieman enemmän. Nykyinen versio tukee vain kahden värin haalistumista, joten haarautimme koodia ja laajensimme sitä hieman.
asentaminen
Tarvitset, jos haluat käyttää tätä menetelmää seuraavassa projektissasi jQuery, jquery.color-2.1.0.jsja 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 vaikutuksia kerrostettuna kuvan tai videon päälle. RGBA: n alfakanava on animoitu aivan kuten muutkin värikanavat, joten voit saada myydyn värimuutoksen peittävyyden vierityksen avulla.
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.
