Responsive Designs gibt es überall, und egal, ob Sie ein Framework verwenden oder Medien selbst abfragen, einige Elemente auf Ihrer Seite müssen sich verschieben oder skalieren.
Wenn Ihre Medienabfragen auf Browserabmessungen basieren und die Größe des Browsers geändert wird, springen Ihre Elemente an ihren Platz. Eine kleine Animation zu diesen Eigenschaften hinzuzufügen ist eine nette Geste für jede responsive Website.
Heute werde ich Ihnen zeigen, wie einfach es ist, diesen zusätzlichen Touch hinzuzufügen, indem Sie die Breite und Deckkraft von Elementen zwischen Medienabfragen animieren.
Für dieses einfache Beispiel verwenden wir ein div, das 3 kleinere divs enthält. Die divs werden entsprechend der Größe des Browserfensters skaliert. Der HTML-Code ist einfach:
Nun wird unser Haupt-CSS die drei Kästchen in das Haupt-Div einfügen und auch, in Übereinstimmung mit einem Rand auf der rechten Seite:
.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;}Dies ist unser Hauptlayout. Ohne Medienabfragen passt sich dieses Layout nicht an, wenn sich das Ansichtsfenster ändert. Nachdem wir nun die Grundlagen geschaffen haben, fügen wir die Medienabfragen hinzu.
Medienabfragen werden heutzutage häufig verwendet. Die meisten Webdesigner verstehen sie, aber für den Fall, dass dies das erste Mal ist, hier eine kurze Auffrischung: Medienabfragen überprüfen die Fähigkeit des verwendeten Geräts (Breite, Ausrichtung und Auflösung) und sie führen spezifisches CSS aus, wenn die Bedingungen für das Medium festgelegt sind Abfrage sind erfüllt. In unserem Beispiel verwenden wir zwei Medienabfragen, die prüfen, ob der Browser kleiner als 960 Pixel ist und ob er kleiner als 660 Pixel ist. Wir werden dann die Breite der Elemente entsprechend einstellen, wir werden auch das letzte untergeordnete div ausblenden, so dass die anderen beiden mehr Platz haben:
@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;}}Mehr brauchen wir für unsere Medienanfragen nicht. Beachten Sie, dass dieser Code unterhalb des ursprünglichen CSS-Codes platziert werden muss, damit die Medienabfragen den darüber liegenden Code überschreiben. Wenn Sie jetzt Ihre Datei testen, sehen Sie, wie sich die Größe der divs ändert und die Deckkraft des letzten untergeordneten divs sich ändert, wenn Sie die Größe des Browserfensters ändern.
Sie werden bemerken, dass wir die Deckkraft des Decks auf 0 stellen, anstatt es anzuzeigen: none. Das ist, weil wir in der Lage sein möchten, das Eigentum zu animieren; Die Deckkraft hat viele verschiedene Grade, während die Anzeige entweder wahr oder falsch ist (und daher nicht animiert werden kann).
CSS-Animationen haben sich bei der Ausführung dieser kleinen Animationen, die wir in jQuery verwendeten, als sehr nützlich erwiesen, z. B. beim Animieren von Farbe, Breite und Deckkraft.
Da wir die Seite als Ganzes animieren möchten, verwenden wir den * CSS-Selektor und richten unsere Animation ein. CSS-Animationen verschlechtern sich elegant, aber Sie sollten auch die Hersteller-Präfixe hinzufügen, um möglichst viel Unterstützung zu erhalten:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Sie können das fertige Ergebnis sehen Hier.
Hinzufügen von einfachen Animationen wie diese, sind eine nette Ergänzung zu jeder Website. Ein paar Zeilen Code fügen Ihrer reaktionsschnellen Website einen wirklich schönen Glanz hinzu.
Haben Sie animierte Medienanfragen in einem Projekt? Welche Auswirkungen haben Sie erreicht? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Bild skalieren über Shutterstock.