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!

Das könnte Sie auch interessieren:

Neueste Artikel

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.