Wo man nur hinguckt, überall im Netz findet sich responsive design - und das ist auch gut so. Wer hat denn noch Lust drauf in statischen Websites herumzuzoomen? Eben, niemand.
Ob man nun ein Framework benutzt oder die media queries selber schreibt, am Ende gibt es verschiedene Elemente auf der Seite die sich bewegen, oder deren Größe sich verändert, je nachdem wie groß das Browserfenster ist.
Um dies zu erzielen, benutzen Webdesigner in der Regel media queries um den Inhalten auf der Seite zu sagen, was sie bei welcher Auflösung, wo zu tun haben. Normalerweise springen diese Elemente jeweils in ihre neuen Position, was auch völlig ok ist. Mit einem kleinen Spritzer Animation, sieht es jedoch gleich von viel schöner aus.
Das Ganze ist schnell gemacht, mit css.
Da wir den Effekt auf der ganzen Seite haben wollen, behelfen wir uns mit dem *css Selektor und fügen das folgende snippet in unser custom.scss file ein:
* { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; }
Viel Spaß damit!