I launched a new the-skylab.de front-/portfolio page today. I felt inspired by the current Vodafone advertisements, so I decided to do something in the same direction.
The skyLab logo should be the central element of the page and is used to navigate. Each click brings a new scene using a rotating black area which uncovers the content. The second scene features a full-screen view to make it possible to show more content.
This is how it looks like:
DOM vs Canvas
At first I was unsure which technology to use. I started with some testing using pure DOM technology. I created a square using a DIV element, added round corners to it and did the rotation using jQuery and CSS3 transforms.
The result was looking ok, but it felt a bit dirty and needed a lot of unnecessary HTML glue code to work correctly. So I decided to use the new hot shit: HTML5 Canvas.
Then I started implementing the script. It uses the concept of “scenes”, gathered together in a “script book”. I can specify the scenes in code which includes a specific rotation of the black area (which is no longer a rectangle, it is a custom drawn triangle path now) and pre- and post-hook to execute and my script will do the rest. These hooks are used e.g. for the circle animation in the second screen.
Also, the page needs to have a minimum and maximum size, otherwise the black area will get to small for the content. This problem isn’t yet solved completely, because enforcing a minimum and maximum size and falling back to scroll bars is currently causing drawing issues.
Surprisingly, the page was working great on all mobile devices (I tested iOS7 iPhone & iPad & latest Android stuff). There was only a problem that the initial zoom level was to small on the phones with smaller screens. But there is a workaround: You can set the default view port with a HTML tag like this in your head:
meta name="viewport" content="width=1024 height=768
Content and Images
I used a trick to create the illusion that the black circle actually uncovers the content. In fact, that’s not the case. It fades in right before the rotation animation is starting. As the text color is white, the content is invisible until it’s covered with the black background. Unfortunately, that doesn’t work with images. They would be visible before the rotation animation is complete. I arrived at the conclusion that the best workaround is to fade the images in and out with a timed delay right before and after a scene change.
Finally, it was as usual a lot more work than I expected. Especially it wasn’t easy to get the right timing of all animations. But in my opinion, the result is great. I did test it with some people and most of them were sure about what to do. After some initial user tests I implemented the pulsating logo which you can see when you’re initially loading the page which makes clear “I am the logo, click me!”.
A problem with the usage of Canvas is that the page will not run on old browsers. But luckily, in these days that’s a thing you can disregard more and more as every major browser is updating itself.
What do you think about the result?