Show HN: Using 3D CSS transform to make a "live screenshot"(scalatutorials.com)
scalatutorials.com
Show HN: Using 3D CSS transform to make a "live screenshot"
http://scalatutorials.com/?3d
14 comments
This is really cool!
Two minor bugs, which are probably two manifestations of the same underlying issue:
1: The screen is centered correctly but the lower left and lower right corners are slightly too far down compared to the screen graphic. (This is with a maximized Chrome window on a 1920x1080 screen.)
2: If the window's not minimized, and I slowly make it narrower or wider, the point at which the live screenshot appears (instead of the static white screenshot) has a problem - the simulated live screen is slightly too small and doesn't fill up the entire laptop screen. The live screen's top right corner is positioned correctly. The problem goes away as I make the window wider and the live screenshot expands (and vice versa).
Two minor bugs, which are probably two manifestations of the same underlying issue:
1: The screen is centered correctly but the lower left and lower right corners are slightly too far down compared to the screen graphic. (This is with a maximized Chrome window on a 1920x1080 screen.)
2: If the window's not minimized, and I slowly make it narrower or wider, the point at which the live screenshot appears (instead of the static white screenshot) has a problem - the simulated live screen is slightly too small and doesn't fill up the entire laptop screen. The live screen's top right corner is positioned correctly. The problem goes away as I make the window wider and the live screenshot expands (and vice versa).
Just noticed #1 too, fixing it...
It's hard! :)
Though I found a generic formula, apparently I need to work on it!
Thanks
EDIT:
fixed the perspective attribute to follow screen width
one open issue is that for some 4:3 resolutions, the sizes are wrong (the background stop resizing for some ratios)
still needs some work. but the real thing will be to find the generic formula for any background, and any location on the screen...
It's hard! :)
Though I found a generic formula, apparently I need to work on it!
Thanks
EDIT:
fixed the perspective attribute to follow screen width
one open issue is that for some 4:3 resolutions, the sizes are wrong (the background stop resizing for some ratios)
still needs some work. but the real thing will be to find the generic formula for any background, and any location on the screen...
[deleted]
For me the actual 'live screenshot' seems to be at a random position in the page, not lined up with the screen of the laptop in the picture.
Nice idea, though.
Nice idea, though.
Thanks,
I tested only on latest Chrome + Firefox...
May I ask which browser did you use?
Similar problem, using Version 30.0.1588.0 dev-m.
As I resize my browser the screenshot position moves (such that it never fully lines up). It's always near the laptop screen, but depending on the width of the browser it's always off either in size or position.
As I resize my browser the screenshot position moves (such that it never fully lines up). It's always near the laptop screen, but depending on the width of the browser it's always off either in size or position.
I'm pushing a version that should fix it... please let me know if it does the trick... thanks for the feedback!
This just brings me to some spam about subscribing for a scala tutorial, c'mon HN.
There's a demo on the page. The macbook's monitor is interactive
Note to the site author - you should put the live screen flat below the sign-up form even when the screen is smaller. Changing window size should not remove information from your page, just move it around.