Überblendeffekte beim Laden von Seiten

Navigation

26. Nov 2013

Die aktuelle ui.js unterstützt Überblendeffekte beim Laden von Seiten. Über dynamische ereignisgesteuerte Klassenergänzung des HTML-Elementes können CSS3 basierte Übergänge bei ready- und load-Events ausgeführt werden.

Über die Klassen pagestatus-uiloaded, pagestatus-ready und pagestatus-loaded lassen sich beliebige CSS-Transitions für Überblendeffekte beim Laden der Seite definieren. Während pagestastus-uiloaded beim Laden der ui.js und pagestatus-ready gesetzt wird, sobald die eigentliche Seite geladen wurde, wird pagestatus-loaded gesetzt, wenn auch sonstige Ressourcen, wie z.B. Bilder verfügbar sind.

Einblenden des Inhaltsbereichs nach dem Laden

.pagestatus-uiloaded #blockLeftContentRight {opacity:0}
.pagestatus-ready  #blockLeftContentRight   {opacity:1;transition:all 0.5s ease-in-out}
.pagestatus-loaded #blockLeftContentRight   {}

Sobald die Seite selbst geladen wurde, wird die Klasse pagestatus-ready gesetzt und somit die Transparenz innerhalb von 0,5 Sekunden aufgehoben.

Einfahren Inhaltsbereichs von der Seite nach dem Laden

.pagestatus-uiloaded #blockLeftContentRight {margin-left:100%;}
.pagestatus-ready  #blockLeftContentRight   {margin-left:0;transition:all 0.5s ease-in-out;}
.pagestatus-loaded #blockLeftContentRight   {}

Sobald die Seite selbst geladen wurde, wird die Klasse pagestatus-ready gesetzt und die Seite fährt innerhalb von 0,5 Sekunden von der Seite ein.

Nach dem gleichen Prinzip können auch Ladeanzeigen realisiert werden, welche über die Klasse pagestatus-ready oder pagestatus-load ausgeblendet werden. Falls JavaScript deaktiviert ist, wird keine der drei Klassen gesetzt und die Seite somit ohne Ladeeffekt angezeigt.