Pageshift
It’s 2012, why are we still seeing websites assemble like Optimus Prime?
In January I wrote Web Design: 2012 and Beyond to highlight points of interest for the coming year. On interactivity I asked, “Is the page reload a thing of the past?”. ‘Web apps’ are all the rage, and while we shouldn’t be trying to copy native (the Web is much more than that), surely it’s about damn time to rid our browsers of the page refresh?
Inspiration can be drawn from slide decks like CSSS, deck.js and impress.js, though they all require very specific markup and single page content. Other solutions built on top of JavaScript MVC frameworks like Backbone.js require a massive effort to maintain URL accessible states.
As a Friday coding† experiment I asked myself if I could remove the refresh and add page transitions to a website that was already built…
Say hello to Pageshift
Pageshift is undoubtedly the worst thing I’ve ever written for the Web!
The screencast frame rate below is a little choppy; best to try it yourself. See Pageshift on GitHub for the code and a neat little bookmarklet you can try on any website. Some work amazingly, others fail spectacularly.
This is a prototype!
It does a pretty tidy job of swapping out <body> elements with CSS transitions and 3D transforms. A lot of <head> meta data is also updated. It even supports the History API. It only works on internal links. All JavaScript gets stripped for the time being until I figure out the best way to handle that.
You could probably use it to turn an existing website into a Powerpoint presentation.
Will I develop this further? Maybe. It was extremely fun to take this far and doing it without jQuery was a big challenge. Ultimately it’s just not a good solution! I may develop it to work with individual elements rather than whole pages, that might be useful…
† Friday coding: a micro-hackathon. Normally an hour or two before beer’o’clock.
