

CSS3 Traveling Through Space - zhs
http://codepen.io/noahblon/full/GKflw

======
kohsuke
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.

~~~
skosch
There are a bunch of cool simulations:

<http://gamelab.mit.edu/games/a-slower-speed-of-light/>

<http://www.spacetimetravel.org/>

<http://realtimerelativity.org/>

------
paulirish
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.

~~~
notum
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".

------
seszett
It took me a while to understand, it only works in Chromium, Firefox shows a
few images, maybe just a part of the animation at less than 1 fps.

~~~
manmal
Works fine for me on Safari 6.0.4.

------
baby
Doesn't work on Firefox.

~~~
Ironlink
It sort of works in my Firefox 20 (current stable release) if I zoom in all
the way.

------
_chrismccreadie
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?

~~~
Ironlink
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.

~~~
_chrismccreadie
Thank you for the explanation.

------
sideproject
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!

------
chriscoyier
Same kinda concept to create a shelf 3D effect :
<http://codepen.io/chriscoyier/pen/gGiAE>

------
faramarz
You're essentially enlarging a background image while moving it at the same
time right? very cool!

------
simpsond
Try zooming in and out. It feels like it changes the FOV.

------
gregorkas
Probably the bes CSS3 demo I've ever seen. Good job.

------
habosa
Wow that's impressive. How was this done?

~~~
stuartjmoore
Hint (from the CSS): <http://s.cdpn.io/18515/PIA09959-1280x800.jpg>

------
Aeiper
Can you put up the link to the code?

------
bharathwaaj
Very good work! :)

------
illicium
WebKit only.

