Värin vaihtava tausta vierityksessä

 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.

Sisällys[show]
 

värirulla

asentaminen

Tarvitset, jos haluat käyttää tätä menetelmää seuraavassa projektissasi jQueryjquery.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!

 

kirjailijasta
Kirjoittaja: Super User

Yksi asia vielä... 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.

 

keitä me olemme?

CollectiveRay on David Attardin johtama - työskennellyt web -suunnittelualalla ja sen ympärillä yli 12 vuotta, tarjoamme toimivia vinkkejä ihmisille, jotka työskentelevät verkkosivustojen kanssa ja niillä. Meillä on myös DronesBuy.net - sivusto drone -harrastajille.

David Attard

 

 

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...