08-01

Finally finished with the intro element.
You know, that screen right after visiting you probably either just immediately clicked away, or got annoyed, since it wasn't instantly visible how to dismiss it :P

It was supposed to be quick and easy. Maybe a matter of 2-3 days at most. It was around 3 weeks. As per usual in software development, I guess.
I ended up with around three different versions that I developed and compared against each other.
The first one was really basic: just an HTML modal that lay on top of the rest of the page. However, this seemed way too ordinary and normal for my taste.
The second attempt was somewhat improved. It was a container laid on top of the main-Tag. When pressed, an animation would play where the container would slide down, revealing the whole site. However, this felt wrong. It felt more like the container was some sort of sign held in front of the website, not an element of the website—if you get what I mean.
Lastly, similar to before, there’s the intro-container on top of the main-Tag. The difference is that when the page loads, JavaScript flags the intro as active, hides the rest of the content, and focuses the close arrow so the intro feels like a dedicated screen. Clicking the arrow (or pressing Escape) confirms it, then the normal page fades and slides into view after a short delay.
The parallax feel is done in CSS by moving the overlay, its container, and any background image by slightly different amounts and speeds, which makes the foreground seem closer than the background and the textbox.
I'm still not 100% happy with the result, but it has some sort of charm I do like.

Design-wise I went for a manpage style, because I think it looks more interesting than a standard text. Also, the line number effect (achieved through normal CSS) is very cool :D
The text is there for two reasons.
One: to reassure visitors I'm not doing the usual internet nonsense.
Two: because it's fun to leave little notices (like right now: happy new year guys :P).

The next step would be to make it a bit more interesting. I'd like to allow multiple images and let PHP pick one on load (so as to not bloat your machine and let JavaScript pick it).
That way the intro doesn't feel like the exact same postcard every time.
Also: I'm considering commissioning art from artists to put there specifically… we'll see!