I’m using this opportunity to help inspire you all to do what I’m doing. Which is basically diving in head first with the thought of “how the F am I going to do this?!” and then thinking, “(shrug) I’m just gonna do it and learn as I go.”
EDIT : added more Iron Man type stuff using SVG, CSS3 Perspective, custom jQuery, and Webflow IX.
I like the space background, how about some nice slide in panels, maybe 4-6 that come left and right, like a spaceship panel… with translucent backgrounds and that highlighted green effect on certain text… like old school buck rodgers, but made with css And… if you are learning, I am learning too It is all about the idea to make something good
updated the top and bottom HUD graphics and added right side HUD thingies after looking at more inspiration:
still need to put a percentage preloader while the cog is spinning. The background video is 5 megs =X. Also thinking of making all the HUD elements parallax as if you’re really looking inside of a futuristic space helmet.
Add a “press pixel to start” or something. It took me a while to find that I should click that little pixel. Beside that I don’t like the HUD color. It doesn’t give that “space feeling” at all… And since the video doesn’t fit the whole screen I can see the white/black stripes at the bottom of the page. The whole concept is amazing, I have to admit. The idea and the code behind it is fantastic. But you should really work on that UI. The menu also is not that prominent as it should. With the background (which I’d love to know how you did) it just disappear visually.
do you know how to stretch an HTML5 Video to full screen? I don’t mind if its not scaled to ratio of the video. I tried making the video a GIF, it came out to be 750+ megs =(
Hey PixelGeek, looking super rad man. 10 points for Wheatley.
Some minor suggestions to possibly make it more awesome:
That orange with the orange video is kind of washing out (I think that’s what bartekkustra is referring to). I’d say if you want to keep the Tron feel, I’d go for more contrast and consider, if possible, adding a subtle outer stroke to the orange keylines. You can see the outer lines in your picture of Rinzler. Or pick a video with less orange tones so yours pops more. I’d also consider changing the gray panels to black and give them some opacity. Let the video bleed through as it does in the new Halo HUD.
Nothing is solid color the pic above. You’ll see that in Iron Man also. Translucency is the jam right now. Save 100% for your dominant elements you want the user to play with.
Keep going with this. Great concept. Love to see where it ends up.
Looking really good PixelGeek. I showed it to a coworker and he dug it too. He was wondering though if you need to have the ‘click the pixel’ screen at all and I’m wondering the same thing. Why not just load up the site right away?
Anyway, can’t wait to see more. I’ll be back to check out the new additions.
Also, more parallax! It looks sweet when the mouse moves. I bet you could knock it up a few notches to really give it even more of a helmet feel.
Added a small button on the right that fades out the content and lets you view the stars go by. (i love this feature because it gets kind of hypnotic.)
Removed video for screens smaller than 991px wide and replaced with still shot of the video
Changed the preloader animation. (I wasn’t ‘feeling’ it)
Still need to add a logo. (I’m not much of a graphic artist, but I’m learning)
Still need to add past projects i’m proud of into the work section
Should I add music with a toggle?
Lessons learned:
Webkit Needs translateZ(1deg)
when you’re playing around with CSS3 3D translates and transforms, anchor tags will only be clickable for 50% of their widths. On iPads you will only see that 50% of the content. You can fix this with a translateZ(1deg).
Ok It is pretty cool though, I really like that viewport and the stars bg video… It is fun to see what people can create with Webflow Playing in the playground is fun !
And… if you are learning, I am learning too 
You’re on a good way 
