For those not old enough to remember the Sinclair ZX Spectrum and it’s ubiquitous loading screen, we explain the inspiration for our 404 page, and how we went about building it in Javascript.
The ZX Spectrum
In the early 1980s, games and applications were loaded into personal computers like the Sinclair ZX Spectrum from audio tapes. This took some time so developers tried to entertain you during the process by displaying basic animations, whilst the audio created coloured stripe effects in the background on the TV screen.
The ZX404
I had the idea to create something that looked like a ZX Spectrum loading screen in Javascript (without the horrible noises!) as our 404 page. This was partly for fun, because I couldn’t find anything similar done in Javascript (why would I?), but also because in many ways this shows where New Now comes from – these were the machines on which I first learned to program (my first computer was a ZX81).
I first created a small bitmap version of our logo, and scaled it up in the page so it becomes suitably blocky. The browser scaling makes it a little blurry which is actually not quite right, but kind of adds to the whole CRT TV effect.
Javascript
Firstly, the page is filled with stripes of random height between 1 and 4%, and each assigned a random colour from our brand palette (+ black).
The black “screen” is overlaid in the middle, then the scaled-up logo, then that is covered by a series of horizontal “blinds”, each 2% high.
We’re now ready to kick things off. A timer is set to update all the stripes to a random palette colour every 10ms, then another is set to animate the next blind off to the right of the screen every 0.2 seconds or so, gradually revealing the logo underneath.
When all blinds have been pushed off, the logo image is switched to a page not found message and link.
This is also a nod to the fact that games would often fail to load – anyone familiar with these machines will instantly recognise the feeling of watching something like this for some minutes before ultimately…. Nothing 🙂