Sanfte Transitions ohne weiße Blitze

smoothState.js – Page-Transitions ganz geschmeidig
Kommentare

Langsame Page-Loads im Web sorgen oftmals für Unmut bei den Nutzern, ganz zu schweigen von der damit einhergehenden schlechten User Experience. Müssen neue (Bild-)Elemente geladen oder das Design einer Website neu aufgebaut werden, sind harte Transitions und weiße Blitze die Folge. Viele Web-Entwickler haben das mittlerweile als Eigenart des Webs akzeptiert, obwohl es dafür keinerlei technische Gründe gibt. Das jQuery-Plugin smoothState.js will Abhilfe schaffen und ermöglicht das Einfügen von sanften Übergängen.

„We don’t need to treat the web like a native app’s ugly cousin“, so smoothState.js-Entwickler Miguel Ángel Pérez. Um trotzdem von solch unliebsamen Folgen wie langsamen Ladezeiten und harten, unschönen Übergängen Abstand zu nehmen, bietet sich ein Plugin an, das Page-Loads kontinuierlich verbessert und so dem Entwickler die Kontrolle über Transitions gibt – Hallo, smoothState.js!

smoothState.js – das steckt dahinter

Man stelle sich nur einmal vor, wie desorientiert man selbst wohl wäre, würde man allein von der Berührung einer Türklinke auf die andere Seite der Tür teleportiert werden. Navigiert man durchs Web, fühlt sich das oft aber ziemlich genau so an: Layouts verändern sich, Elemente ordnen sich neu an oder verschwinden und der Nutzer braucht Zeit, um sich wieder zurechtzufinden. Sanfte Transitions reduzieren den Aufwand, sich in einer neuen Web-Umgebung einzurichten. JavaScript-Frameworks sind ein gängiger Weg, um dieses Problem zu lösen. Allerdings fehlt ihnen oft der Vorteil von „unobtrusive“ Code, denn „unobtrusive“ JavaScript weist eine bessere Ausfallsicherheit, Performance und Accessibility auf.

smoothState.js will eine Alternative zu JavaScript-Frameworks bieten: Dabei handelt es sich um ein jQuery-Plugin, das Page-Loads kontinuierlich verbessert. Auf diese Weise behalten Entwickler die volle Kontrolle über Page-Transitions. Das Plugin bietet Hooks, die dirigieren, wie Elemente während der Navigation auf einer Website erscheinen und verschwinden. Dafür nutzt es die Zeit, in der Animationen laufen, um Inhalte via AJAX auf die Website zu bringen. smoothState.js bestimmt dabei nicht, wie einzelne Objekte animiert werden sollen – es unterstützt CSS-Animationen und JavaScript-Animation-Libraries wie velocity.js. Falls der Browser des Nutzers nicht über die geforderten Features verfügt, verschwindet smoothState.js im Hintergrund und bleibt inaktiv.

Kurz zusammengefasst nutzt smoothState.js die folgenden Features:

  • Progressive Enhancement
  • jQuery
  • history.pushState()
  • Ajax

Damit sollen Ladezeit und Transitions unaufdringlich verbessert werden, sodass sich Page-Loads einer Website mehr wie ein Single-Page-Application-Framework verhalten.

Voraussetzungen

smoothState.js wird in Containern initialisiert, nicht über Links. Die Container kann man sich dabei wie kleine Fenster-Objekte innerhalb der Website vorstellen, ähnlich wie iframes. Jeder Container benötigt eine ID – einen einzigartigen Hook, der smoothState.js mitteilt, was auf der Site aktualisiert werden muss. Zudem sollte jeder Link ein komplettes Layout zurückgeben, nicht nur ein HTML-Fragment. Auf diese Weise wird eine Website belastbarer, da es den Entwicklern so erlaubt wird, bei Fehlern den Prozess zu beenden und den User umzuleiten.

Ausführliche Informationen zum jQuery-Plugin smoothState.js bietet die Projektwebsite; dort stehen ebenfalls eine ausführliche Dokumentation sowie einige Beispiele zur Nutzung zur Verfügung.

Name smoothState.js
Hersteller Miguel Ángel Pérez
Projektwebsite http://smoothstate.com/index.html
GitHub https://github.com/miguel-perez/smoothState.js

 

Aufmacherbild: Smooth Harmony Gradient Background with Turquoise Pink Yellow Crimson Green Colors von Shutterstock / Urheberrecht: Olga Pink

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -