
Show HN: Using 3D CSS transform to make a "live screenshot" - eranation
http://scalatutorials.com/?3d
======
grey-area
For the confused (I initially only saw a sign-up form and thought it was
required, and came back here disappointed) - if your browser window is below
1300px or so wide, the live demo won't show up. When it does show up it is
quite subtle - in the screen of the generic background image is an editable
code snippet, transformed with CSS so that it is skewed and appears to be in
the picture. You can type and run code in that laptop window screen.

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.

~~~
eranation
Thanks, good idea, will do!

p.s. due to HN front page traffic probably the service that does the execution
of the code seems to have been knocked down... (scalakata.com, an amazing
project by the way, not mine, source on github). sorry!

------
austinz
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).

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

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

~~~
eranation
Thanks, I tested only on latest Chrome + Firefox... May I ask which browser
did you use?

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

~~~
eranation
I'm pushing a version that should fix it... please let me know if it does the
trick... thanks for the feedback!

------
aa0
This just brings me to some spam about subscribing for a scala tutorial, c'mon
HN.

~~~
adrusi
There's a demo on the page. The macbook's monitor is interactive

~~~
austinz
The browser window has to be some minimum width, otherwise the page defaults
to a static image of the guy editing some code in a generic text editor.

~~~
aa0
Ah I see, thanks it's working now.

