6 ms·
CSS3 Traveling Through Space
- seszett 13y agoIt 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 13y agoWorks fine for me on Safari 6.0.4.
- habosa 13y agoWow that's impressive. How was this done?
- stuartjmoore 13y agoHint (from the CSS): http://s.cdpn.io/18515/PIA09959-1280x800.jpg http://s.cdpn.io/18515/PIA09959-1280x800.jpg
- gregorkas 13y agoProbably the bes CSS3 demo I've ever seen. Good job.
- simpsond 13y agoTry zooming in and out. It feels like it changes the FOV.
- _chrismccreadie 13y agoOutstanding.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 13y agoIt 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 13y agoThank you for the explanation.
- kohsuke 13y agoThis 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 13y agoThere are a bunch of cool simulations: http://gamelab.mit.edu/games/a-slower-speed-of-light/ http://gamelab.mit.edu/games/a-slower-speed-of-light/ http://www.spacetimetravel.org/ http://www.spacetimetravel.org/ http://realtimerelativity.org/ http://realtimerelativity.org/
- baby 13y agoDoesn't work on Firefox.
- Ironlink 13y agoIt sort of works in my Firefox 20 (current stable release) if I zoom in all the way.
- faramarz 13y agoYou're essentially enlarging a background image while moving it at the same time right? very cool!
- Aeiper 13y agoCan you put up the link to the code?
- illicium 13y agoWebKit only.
- paulirish 13y agoSource image that's used: http://s.cdpn.io/18515/PIA09959-1280x800.jpg 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 http://codepen.io/noahblon/pen/GKflw Pretty simple.
- notum 13y agoSimple, 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".
- noahblon 13y agoYep, 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.
- bharathwaaj 13y agoVery good work! :)
- sideproject 13y agoThere 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 13y agoSame kinda concept to create a shelf 3D effect : http://codepen.io/chriscoyier/pen/gGiAE http://codepen.io/chriscoyier/pen/gGiAE