Sisältö
Useimmat ihmiset näkevät käyttöliittymät päivittäin riippumatta siitä, ovatko ne mobiilisovelluksessa tai verkkosivustolla, joten on tärkeää saada se oikein niitä luodessasi (verkkosivustojen rakentaja tekee tämän sinulle yksinkertaiseksi) ja jos voit elävöittää heitä CSS-animaatiolla , sitä parempi.
- Tutustu CSS-animaation uuteen rajaan
Rakennettaessa verkkoa, varsinkin kun on kyse animaatiosta, on otettava huomioon muun muassa selaintuki ja suorituskyky (kunnollinen web-hosting auttaa tässä). Tässä opetusohjelmassa käydään läpi kaksi parasta ratkaisua käyttöliittymän animaatioiden ja siirtymien luomiseen.
Käytämme CSS: n ja GreenSockin (GSAP) yhdistelmää. Olemme kaikki tietoisia CSS: stä, mutta jotkut teistä eivät ehkä ole tietoisia GreenSock-alustasta. GreenSock on JavaScript-kehys, jonka avulla voit helposti luoda upeita animaatioita HTML-elementeillä vain muutamalla rivillä koodia.
Kuvat ja logot ovat erityisesti erottuneet paljon enemmän viime vuosina. Kuinka usein käytämme hymiöitä tekstin sijaan? Matkapuhelinnavigaatioissa käytetään pikemminkin kuvakkeita kuin tekstiä, ja ajan mittaan käyttäjät tietävät, mihin kukin meidät vie. Aloitamme luomalla animoidun navigointipalkin vain logoilla. Kun viet hiiren jokaisen päälle, se animoi lopullisen tilan, joka näyttää samanlaiselta kuin tämä kuvakaappaus. Onko sinulla paljon lisättävää mediaa? Varmuuskopioi se pilvitallennustilaan.
Rakenna navigointi
Ensinnäkin luomme uuden index.html-tiedoston ja määritämme navigointialueemme kuuden linkin kanssa. Jokainen linkki koostuu kuvakkeesta, joka on otettu Ioniconsista. Meidän on annettava jokaiselle luokka.
div class = "navigationbar"> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> / div>
Emme käsittele koko HTML- tai CSS-asiakirjaa yksityiskohtaisesti, mutta saat täydellisen koodiluettelon GitHubista.
Seuraavaksi meidän on luotava CSS-tiedosto, jonka nimi on style.css ja lisäämällä sitten seuraava koodirivi tuodaksesi Ioniconeja:
@import url (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
Perustamme nyt luokan navlogo tyylitaulukon sisällä oleville navigointikuvillemme. Tässä asetetaan sijainti, korkeus, kirjasinkoko jne.
.navlogo {sijainti: suhteellinen; fontin koko: 40px; leveys: 75px; marginaali: 40px; korkeus: 75px; viivan korkeus: 75 kuvapistettä; näyttö: inline-block; väri: #fff; } .navlogo: {sijainnin jälkeen: absoluuttinen; yläosa: 0; pohja: 0; vasen: 0; oikea: 0; reunus: 2px kiinteä # e6e6e6; sisältö: ''; z-indeksi: -1; reunan säde: 50%; }
Seuraavaksi meidän on määritettävä animaatio meidän .navlogo elementti. Täällä luodaan kierto- ja siirtymisefektit sekä muutetaan elementin väriä leijutettaessa.
.navlogo: ennen, .navlogo: {-webkit-Siirtymän jälkeen: kaikki 0,45: t helposti ulos-ulos; siirtyminen: kaikki 0,45 sekuntia helppoa sisään-ulos; } .navlogo: hover, .navlogo: aktiivinen, .navlogo.hover {väri: # c0392b; } .navlogo: hover: after, .navlogo: aktiivinen: after, .navlogo.hover: jälkeen {border-color: transparent # c0392b; -webkit-muunnos: kiertää (360deg); muunnos: kiertää (360 astetta); }
Lopuksi meidän on lisättävä tapahtuma, joka poistaa hover-luokan, kun hiiri ei enää leiju logojemme yläpuolella. Näin varmistetaan, että logomme tulee ulos animaatiosta. Luo uusi JavaScript-tiedosto nimeltä main.js ja kirjoita sitten seuraava koodi:
$ (“. Hover"). Mouseleave (function () {$ (this) .removeClass (“hover”);});
Navigointimme on nyt valmis lähtemään lukuun ottamatta joitain hyperlinkkejä. Olemme onnistuneet saavuttamaan tämän pelkästään CSS3: n avulla.
Luo ja animoi painikkeita kuormitettuna
Lisäämme nyt neljä painiketta sivuillemme ja tuomme kukin painikkeet hitaasti GreenSock-kirjastoon yksi toisensa jälkeen viiveellä. Tämä luo mukavan siirtymäefektin.
Ensin meidän on avattava index.html-tiedosto uudelleen ja luotava painikeosamme alla olevan koodin avulla:
div id = “buttonarea”> -painike> Vaihda taustaväri / painike> painike> Vaihtoehto 1 / painike> painike> Vaihtoehto 2 / painike> painike> Vaihtoehto 3 / painike> / div>
Sitten meidän on määritettävä viittaus GreenSock-kirjastoon head> -osiossa.
komentosarja src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"> / script>
Lopuksi meidän on määritettävä animaatiomme. Tämä vie vain yhden koodirivin. Porrastettu on funktio, joka porrastaa elementtimme alkamisajan. Suluissa määritämme elementin nimen. Tässä tapauksessa se olisi .painike. Meidän on myös asetettava kesto, ja tässä tapauksessa se asetetaan yhdeksi sekunniksi kunkin välillä anibutton elementti.
TweenMax.staggerFrom (’. Anibutton’, 1, {opasiteetti: 0}, 1);
Taustan ja elementin värin siirtyminen
Seuraava asia, jota aiomme tarkastella, on verkkosivuston taustan ja painikkeiden siirtäminen väristä toiseen. Emme usein törmää tähän ominaisuuteen verkkosivustoilla, vaikka se olisi ehdottomasti mielenkiintoista esimerkiksi esteettömyyden tai verkkosovelluksen asetusten kannalta, kun käyttäjä saattaa haluta asettaa oman värimallin.
Varmista, että sivullesi on asetettu taustaväri ja reunus ja tekstiväri style.css-tiedostossa.
.painike {reunus: 2px kiinteä # 000; väri: # 000; }
Seuraavaksi luomme JavaScript-toiminnon eri GreenSock-värisiirtymien määrittämiseksi.
function changeBackground () {TweenMax.to ("body", 3, {backgroundImage: "lineaarinen gradientti (vasemmalle, # 646580, # 212121)"}); TweenMax.to (". anibutton", 3, {color: "#F F F"}); TweenMax.to (“. Anibutton”, 3, {reunus: "2px kiinteä #fff"});}
Etsimme täällä enemmän pimeää tilaa, joten tausta on tumma, mutta painikkeet näyttävät vaalealta. Koodin ensimmäinen rivi muuttaa taustavärin tummemmaksi kolmen sekunnin kuluessa. Toinen ja kolmas rivi muuttavat tekstin värin ja reunuksen valkoiseksi kolmen sekunnin kuluessa.
Lopuksi meidän on soitettava Vaihda taustakuva() -toiminto yhdestä painikkeesta, joka löytyy index.html-tiedostosta.
button onclick = "changeBackground ()"> Vaihda tausta / painike>
Projekti on nyt valmis käynnistämään. Tietenkin voit mennä paljon pidemmälle lisäämällä uusia elementtejä ja muuttamalla myös niiden värityyliä.
Tämä artikkeli julkaistiin alun perin 309 -lehdessä netto, maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Osta numero 309 täältä tai tilaa täällä.
