CSS3 Traveling Through Space(codepen.io)
codepen.io
CSS3 Traveling Through Space
http://codepen.io/noahblon/full/GKflw
22 comments
Same kinda concept to create a shelf 3D effect : http://codepen.io/chriscoyier/pen/gGiAE
Wow that's impressive. How was this done?
Hint (from the CSS): http://s.cdpn.io/18515/PIA09959-1280x800.jpg
Probably the bes CSS3 demo I've ever seen. Good job.
Try zooming in and out. It feels like it changes the FOV.
Outstanding.I felt as if I was warping through space in Eve Online! In all seriousness, amazing demo. Well done.
Off-topic but interested: It doesn't display correctly in Firefox (only renders a small segment of the space warp). Why is this?
Off-topic but interested: It doesn't display correctly in Firefox (only renders a small segment of the space warp). Why is this?
It appears that the "wormhole" is off center. If you zoom the page, you'll notice that each step brings the tunnel closer to the center of the screen.
At zoom level 6 (counting from 100% as level zero) you are viewing from inside the tunnel, but only just. At zoom level 8 (maximum), the view is almost at the center of the tunnel.
If I had to take a guess, the page fails to calculate the center of the viewport, using (0,0) as its target coordinate; but (0,0) is top-left.
At zoom level 6 (counting from 100% as level zero) you are viewing from inside the tunnel, but only just. At zoom level 8 (maximum), the view is almost at the center of the tunnel.
If I had to take a guess, the page fails to calculate the center of the viewport, using (0,0) as its target coordinate; but (0,0) is top-left.
Thank you for the explanation.
This demo is great, so I hate to be a party pooper, but this is not how it'll look if you are actually travelling near the speed of light at all!
For example, you'd see stars concentrate more near the direction you are heading with substantial blue shift, and not a whole lot on your side.
At the subjective speed in this demo, the blue shift would be so much and the light cone so narrow that you'll probably just see one dot in the center and pitch black everything else.
I think a physically accurate depiction of how it'll actually look if you are traveling near the speed of light would be very cool.
For example, you'd see stars concentrate more near the direction you are heading with substantial blue shift, and not a whole lot on your side.
At the subjective speed in this demo, the blue shift would be so much and the light cone so narrow that you'll probably just see one dot in the center and pitch black everything else.
I think a physically accurate depiction of how it'll actually look if you are traveling near the speed of light would be very cool.
There are a bunch of cool simulations:
http://gamelab.mit.edu/games/a-slower-speed-of-light/
http://www.spacetimetravel.org/
http://realtimerelativity.org/
http://gamelab.mit.edu/games/a-slower-speed-of-light/
http://www.spacetimetravel.org/
http://realtimerelativity.org/
You're essentially enlarging a background image while moving it at the same time right? very cool!
Can you put up the link to the code?
WebKit only.
Source image that's used: http://s.cdpn.io/18515/PIA09959-1280x800.jpg It covers four rectangular walls and just shifts the Z closer and closer to you. And meanwhile does an opacity swap to a second set so it can do it infinitely.
Full unminified CSS: http://codepen.io/noahblon/pen/GKflw
Pretty simple.
Full unminified CSS: http://codepen.io/noahblon/pen/GKflw
Pretty simple.
Simple, but clever, love it.
Reminds me of that old Trek debate: "If those were really stars in the warp effect you'd reach the other end of the galaxy in a couple of seconds".
Yep, Paul's got it. Only thing to add is that the perpective value on the stage is very small, making the box appear to be very long and the background image stretched out.
Very good work! :)
There is an optical illusion happening as a by product of this demo! the "div" that separates the demo pane with the CSS, JS and HTML code pane looks slightly bent!