Making an NME cover move

Last week, Mark Neil, Art Director for NME, tweeted this. I thought he had a good point and having a few hours to myself today, I thought I’d give it a go.

I took a look at some ’tile’ jQuery plugins and found that the best one on offer was Metro UI – a CSS/jQuery project to emulate the Windows 8 interface.

Having worked a few examples out of how to switch between images on a tiled DIV, I started to put it all together and used the grid system included in Metro to avoid building up a load of different stylesheets. Fortunately, the 12 columns grid that comes with Metro is also a similar grid to the one used on the NME cover.

From there it was just a matter of reproducing individual typographical elements (some better than others, admittedly), throwing in some animated GIFs etc. for my own enjoyment and writing just over 900 lines of code.

The outcome’s pretty nice, I think. Obviously the cover is the work of NME’s art department, but I’m pretty happy with my code implementation.

Also, forgot to eat lunch because I was too into this.

See the final outcome here.