Responsive design er overalt, og om du bruker et rammeverk eller skriver media spørringer selv, er enkelte elementer på siden din bundet til å flytte eller skalere.
Hvis medieforespørsmålene dine er basert på nettleserdimensjoner og nettleseren er endret, vil elementene dine hoppe på plass. Å legge til en liten animasjon til disse egenskapene er en fin touch for ethvert responsivt nettsted.
I dag skal jeg vise deg hvor lett det er å legge til det ekstra berøringen, ved å animere bredden og opaciteten av elementene mellom medieforespørsler.
For dette enkle eksempelet bruker vi en div, som inneholder 3 mindre divs. Divs skal skalere i henhold til størrelsen på nettleservinduet. HTML er enkel:
Nå vil våre viktigste CSS plassere de tre boksene i hoved div og også, i tråd med en margen til høyre:
.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;}Dette er vårt hovedoppsett, uten medieforespørsler, dette oppsettet vil ikke tilpasse seg hvis visningsporten endres. Nå som vi har grunnleggende på plass, la oss legge til medieforespørslene.
Media spørringer brukes ofte i dag. De fleste webdesignere forstår dem, men i tilfelle dette er første gang, er det en rask oppdatering: Medieforespørsler kontrollerer evnen til enheten du bruker (bredde, orientering og oppløsning) og de kjører bestemt CSS hvis vilkårene som er angitt for media spørringen er oppfylt. I vårt eksempel bruker vi to medieforespørsler som vil sjekke om nettleseren er mindre enn 960px, og om den er mindre enn 660px. Vi vil da sette bredden på elementene i samsvar med det, og vi vil også gjemme den siste barnedelen, slik at de to andre har mer plass:
@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;}}Det er alt vi trenger for våre medieforespørsler. Vær oppmerksom på at det er viktig at denne koden er plassert under den opprinnelige CSS-koden ovenfor, slik at medieforespørslene overskriver koden over dem. Hvis du tester filen din nå, ser du størrelsen på divene som endres, og opaciteten til den siste barnet div endres når du endrer størrelsen på nettleservinduet.
Du vil legge merke til det for å gjemme det siste barnet div vi setter opaciteten til 0 i stedet for å sette den til å vise: ingen. Det er fordi vi ønsker å kunne animere eiendommen; Opacity har mange forskjellige grader, mens skjermen er enten sann eller falsk (og derfor kan ikke animeres).
CSS-animasjoner har vist seg å være veldig nyttige når du utfører disse små animasjonene som vi pleide å kjøre i jQuery, for eksempel animerende farger, bredde og ugjennomtrengelighet.
Fordi vi vil at siden skal animere som helhet, bruker vi * CSS-väljeren og setter opp animasjonen vår. CSS-animasjoner nedbrytes grasiøst, men du vil også legge til leverandørens prefikser, slik at det er så mye støtte som mulig:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Du kan se det ferdige resultatet her.
Legge til enkle animasjoner som disse, er en fin etterbehandling til et hvilket som helst nettsted. Noen få kodelinjer legger til en veldig fin polsk til ditt responsive nettsted.
Har du animerte medieforespørsler i et prosjekt? Hvilke effekter har du oppnådd? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, skala bilde via Shutterstock.