After stumbling into the brilliant Galaxy.fili.nl website, we thought we should invite Filidor Wiese to guest post on how can you do such a wonderful thing and if you need to be a magician or not to create this in HTML5 & CSS3.
Galaxy.fili.nl is a new website where I promote myself as a front/back-end web developer. I felt it didn’t make sense to build yet another portfolio based website – mainly because most visitors wouldn’t be able to see past the various project designs, while my work, the underlying techniques and usability are less tangible. About a month ago I asked designer Arthur van ‘t Hoog to design a fancy new website where I could demonstrate some of the latest web techniques like HTML5 and CSS3.
8bit pixel graphics have been a recurring theme on some of my earlier websites, so we decided to build the concept around a pixelated character – which is essentially a virtual representation of myself. The character would re-enact my daily routine by showing sequences of animation depending on the actual time someone visits the website, for example I would be sleeping at night and drinking coffee in the morning. As a bonus feature we later added a time line controller that would enable the visitor to view other time slots without having to wait several hours. Here you see me doing one of my favorite activities;
We gave the character his own planet in his own universe because space as a theme is just awesome, also we really liked the idea of writing <body id=”universe”>. To simulate the vastness of space we wanted to create a sense of depth. We found that the best way of achieving this was to divide the website into a stack of layers and making them move in parallax. In effect objects nearby (like the planet) would move more then objects in the distance (like stars) based on the cursor position of the mouse.
THE SPRITE ANIMATIONS
Another requirement would be the ability to not only exactly time, loop, chain and script several animations in a row – but also to reposition itself frame by frame. This feature enables for more advanced animation. For example a walking character using a basic sprite sheet;
Currently, on the website there are eight placeholder elements for animation (signal-tower, blinking eyes, space debris, characters, et cetera). One of the difficulties that emerged was the necessity for interaction between different placeholders. For example, the tower should only emit signals if the character is typing on his computer. Or in a more interesting example, consider the scene below;
Finally on the 15th of July we decided it was good enough to launch, even though we probably could have gone on perfecting it indefinitely – a website like this is never quite finished. I’ve learned a lot while working on this project. For one, how to make good use of hardware accelerated CSS3 properties like transform and @keyframe and how to fall back on conventional techniques for the less then modern browsers. I’m proud to say that on the 22th of July the website won a ‘Site of the Day’ Awwward.
Thanks for reading, I hope you like the website as much as we enjoyed making it.