Vastuullinen muotoilu on kaikkialla, ja käytätkö kehystä tai kirjoitat mediakyselyjä itse, jotkin sivusi elementit ovat velvollisia siirtymään tai skaalautumaan.
Jos mediakyselysi perustuvat selaimen mittasuhteisiin ja selaimen koko muuttuu, elementtejä siirtyy paikalleen. Pikku animaation lisääminen näihin ominaisuuksiin on mukava kosketus mihin tahansa vastaaviin sivustoihin.
Tänään aion näyttää, kuinka helppoa on lisätä ylimääräinen kosketus, animoimalla elementtien leveyttä ja läpinäkyvyyttä mediakyselyjen välillä.
Tässä yksinkertaisessa esimerkissä käytämme div, joka sisältää kolme pienempää div. Divs skaalautuu selainikkunan koon mukaan. HTML on yksinkertainen:
Nyt tärkein CSS sijoittaa kolme laatikkoa main divin sisällä ja myös oikealla reunalla:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Tämä on tärkein ulkoasu ilman mediakyselyjä, tämä ulkoasu ei sovi, jos näkymä muuttuu. Nyt kun meillä on perusteet, lisäämme mediakyselyt.
Mediakyselyjä käytetään nykyään usein. Useimmat web-suunnittelijat ymmärtävät ne, mutta jos tämä on ensimmäinen kerta, tässä on nopea päivitys: mediakyselyissä tarkennetaan käytettävän laitteen ominaisuus (leveys, suunta ja tarkkuus) ja he käyttävät tiettyä CSS: ää, jos mediaa varten määritetyt ehdot kysely täyttyy. Esimerkissämme käytetään kahta mediakyselyä, jotka tarkistavat, onko selain pienempi kuin 960px ja onko se pienempi kuin 660px. Sitten asetetaan elementtien leveys vastaavasti, myös piilotamme viimeisen lapsen divin, niin että kahdella muulla on enemmän tilaa:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}Tarvitsemme vain mediakysymyksiämme. Huomaa, että on tärkeää, että tämä koodi sijoitetaan alkuperäisen CSS-koodin alle niin, että mediakyselyt korvaavat yllä olevan koodin. Jos testat tiedostosi nyt, näet, kuinka suuret div-arvot muuttuvat ja viimeisen lapsen div-muutoksen peittävyys muuttuvat selainikkunan kokoa muutettaessa.
Huomaat, että viimeisen lapsen div piilottamiseksi asetamme sen peittävyyden 0: n sijasta sen asettamisen sijaan näytölle: ei mitään. Tämä johtuu siitä, että haluamme pystyä animaamaan omaisuuden; opasiteetti on monta eri astetta, kun taas näyttö on joko todenmukainen tai epätosi (eikä sen vuoksi voida animoitua).
CSS-animaatiot ovat osoittautuneet todella hyödyllisiksi suoritettaessa näitä pieniä animaatioita, joita käytimme jQueryssä, kuten värin, leveyden ja läpinäkyvyyden animoinnissa.
Koska haluamme sivun animaation kokonaisuutena, käytämme * CSS-valitsinta ja asetamme animaatiomme. CSS-animaatiot hajoavat kauniisti, mutta haluat lisätä myös myyjän etuliitteet, niin että on niin paljon tukea kuin mahdollista:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Näet lopullisen tuloksen tässä.
Yksinkertaisten animaatioiden lisääminen on hieno viimeistely verkkosivustoille. Muutama rivin koodi lisää todella mukavaa kiillotusohjelmaan reagoivaan sivustoosi.
Oletko animoinut mediakysymyksiä projektissa? Mitä vaikutuksia olette saavuttaneet? Kerro meille kommentit.