Responsivt design er overalt, og om du bruger en ramme eller skriftlig medie, spørger du selv, nogle elementer på din side er bundet til at flytte eller skalere.
Hvis dine medieforespørgsler er baseret på browserens dimensioner, og browseren er ændret, vil dine elementer springe på plads. Tilføjelse af en lille animation til disse egenskaber er et godt preg for ethvert lydhurt websted.
I dag vil jeg vise dig, hvor nemt det er at tilføje det ekstra touch ved at animere bredden og opaciteten af elementer mellem medieforespørgsler.
For dette enkle eksempel bruger vi en div, der indeholder 3 mindre divs. Dellerne skalere efter størrelsen af browservinduet. HTML er enkel:
Nu placerer vores vigtigste CSS de tre bokse inde i main div og også i overensstemmelse med en margen til højre:
.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 vores hovedlayout, uden medieforespørgsler. Dette layout tilpasses ikke, hvis visningsporten ændres. Nu hvor vi har det grundlæggende, skal vi tilføje medieforespørgsler.
Medieforespørgsler bruges ofte i dag. De fleste webdesignere forstår dem, men hvis dette er din første gang, er det en hurtig genopfriskning: Medieforespørgsler kontrollerer evnen til den enhed, du bruger (bredde, orientering og opløsning), og de kører specifikt CSS, hvis betingelserne er angivet for medierne forespørgslen er opfyldt. I vores eksempel bruger vi to medieforespørgsler, der kontrollerer om browseren er mindre end 960px, og om den er mindre end 660px. Vi sætter derefter elementernes bredde i overensstemmelse hermed, og vi gemmer også den sidste barn div, så de to andre har mere plads:
@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, hvad vi har brug for til vores medieforespørgsler. Bemærk, at det er vigtigt, at denne kode er placeret under den oprindelige CSS-kode ovenfor, så mediernes forespørgsler overskriver koden over dem. Hvis du tester din fil nu, vil du se størrelsen af de divs, der ændres, og opaciteten af det sidste barn div ændres, når du ændrer størrelsen på browservinduet.
Du vil bemærke det for at skjule det sidste barn div vi sætter sin opacitet til 0 i stedet for at indstille den til at vise: none. Det skyldes, at vi ønsker at kunne animere ejendommen; opacitet har mange forskellige grader, mens displayet er enten sandt eller falsk (og derfor kan ikke animeres).
CSS-animationer har vist sig at være meget praktiske, når de udfører disse små animationer, som vi plejede at køre i jQuery, såsom animerende farve, bredde og opacitet.
Fordi vi vil have siden til at animere som helhed, bruger vi * CSS-vælgeren og opretter vores animation. CSS animationer nedbryder yndefuldt, men du vil også tilføje sælgerpræfikserne, så der er så meget support som muligt:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Du kan se det færdige resultat her.
Tilføjelse af enkle animationer som disse, er et godt finish til enhver hjemmeside. Et par linjer kode tilføjer en rigtig flot polsk til dit lydhøre websted.
Har du animerede medieforespørgsler i et projekt? Hvilke effekter har du opnået? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, skala billede via Shutterstock.