Responsive design is overal en of u zelf een framework gebruikt of media-queries opzoekt, sommige elementen op uw pagina kunnen zich verplaatsen of schalen.
Als uw mediaquery's gebaseerd zijn op browserafmetingen en de grootte van de browser wordt gewijzigd, springen uw elementen op hun plaats. Het toevoegen van een kleine animatie aan deze eigenschappen is een leuke bijkomstigheid voor elke responsieve site.
Vandaag zal ik laten zien hoe eenvoudig het is om die extra touch toe te voegen, door de breedte en dekking van elementen tussen mediaquery's te animeren.
Voor dit eenvoudige voorbeeld gebruiken we een div, met 3 kleinere divs. De divs worden geschaald volgens de grootte van het browservenster. De HTML is eenvoudig:
Nu plaatst onze hoofd-CSS de drie vakken in de hoofd-div en ook, in lijn met een marge aan de rechterkant:
.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;}Dit is onze hoofdlay-out, zonder mediaquery's, deze lay-out wordt niet aangepast als de viewport verandert. Nu we de basis hebben, kunnen we de mediaquery's toevoegen.
Mediaqueries worden tegenwoordig vaak gebruikt. De meeste webontwerpers begrijpen deze, maar voor het geval dit de eerste keer is, volgt hier een korte opfrissing: mediaquery's controleren de mogelijkheden van het apparaat dat u gebruikt (breedte, richting en resolutie) en ze voeren specifieke CSS uit als de voorwaarden voor de media zijn opgegeven query is voldaan. In ons voorbeeld gebruiken we twee mediaquery's om te controleren of de browser kleiner is dan 960px en of deze kleiner is dan 660px. Vervolgens stellen we de breedte van elementen in, we verbergen ook de laatste onderliggende div zodat de andere twee meer ruimte hebben:
@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;}}Dat is alles wat we nodig hebben voor onze mediaquery's. Merk op dat het belangrijk is dat deze code onder de oorspronkelijke CSS-code hierboven wordt geplaatst, zodat de mediaquery's de code erboven overschrijven. Als je nu je bestand test, zie je de grootte van de div's veranderen en de dekking van de laatste onderliggende div veranderen wanneer je het formaat van het browservenster aanpast.
U zult opmerken dat om de laatste onderliggende div te verbergen we de dekking instellen op 0 in plaats van instellen om weer te geven: geen. Dat komt omdat we het pand willen kunnen animeren; dekking heeft veel verschillende gradaties, terwijl weergave ofwel waar of onwaar is (en daarom niet geanimeerd kan zijn).
CSS-animaties zijn erg handig gebleken bij het uitvoeren van deze kleine animaties die we in jQuery hebben gebruikt, zoals het animeren van kleur, breedte en dekking.
Omdat we willen dat de pagina als geheel wordt geanimeerd, gebruiken we de * CSS-selector en maken we onze animatie. CSS-animaties worden elegant afgebroken, maar u wilt ook de leveranciersprefixes toevoegen, zodat er zoveel mogelijk ondersteuning is:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}U kunt het eindresultaat zien hier.
Het toevoegen van eenvoudige animaties zoals deze, is een mooie finishing touch voor elke website. Een paar regels code voegen een heel mooie poets toe aan je responsive site.
Heb je geanimeerde mediaquery's in een project? Welke effecten heb je bereikt? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, schaal afbeelding via Shutterstock.