Vlieg door je website met SmoothState

Vindt jij het wisselen van pagina binnen een website waarbij je hele scherm flitst ook zo vervelend? Je denkt misschien dat dit zo hoort, maar het kan ook anders! Met SmoothState bepaal jij hoe dit gaat op jouw site.


Wat is SmoothState?

Even technisch gezien: SmoothState is een Jquery extensie die je controle geeft over je pagina-overgangen. Dit betekent dat je nu zelf kunt bepalen hoe het eruit ziet als je van pagina wisselt.

Stel je eens voor hoe vreemd het zou zijn als je een deurknop aanraakt en je ineens aan de andere kant van de deur staat. Navigeren op een website voelt soms als het gebruiken van zo’n deurknop. Lay-outs veranderen, elementen herschikken of verdwijnen. Het kost de bezoeker tijd om zich aan te passen aan veranderingen. Soepele overgangen verminderen de inspanning die bezoekers nodig hebben om deze overgangen te verwerken.

Dit klinkt misschien wat heftig maar toch kan dit het verschil zijn tussen een fijne & rustige en onprettige & drukke website.

SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.

Javascripting.org

Hoe werk het?

De techniek gebruikt ‘hooks’ om in te haken op bestaande functies. Bij het verlaten van een pagina wordt er een korte animatie afgespeeld. Tijdens deze animatie wordt de volgende pagina vast geladen. Wanneer de animatie afgelopen is en de volgende pagina geladen is, wordt de nieuwe pagina met een animatie in beeld gebracht.

Hierbij kunnen elementen die niet veranderen, zoals je menu, in beeld blijven staan. Dus geen witte flitsen meer waarbij alle content verdwijnt en alle nieuwe content naar voren knalt!

Hier een mooi voorbeeld van SmoothState.

SmoothState op jouw website?

In principe kan SmoothState ingebouwd worden op alle maatwerk websites. De maatwerk websites die gemaakt zijn door WebCapital zijn hier sowieso geschikt voor.

Wil je deze techniek ook op jouw website? Neem contact op met ons, dan regelen we dat!