Hacker News new | ask | show | jobs
by travisglines 5166 days ago
A simple summary of what I think is going on here:

There is a bit of slight of hand here that makes this look like a CSS3 animation but I'm pretty sure it's not.

Upon initial page load there is a canvas that takes up the background that has the zipper, logo, split input's and buttons on it. On top of that they have real DOM input and buttons.

When you touch the zipper they hide the DOM elements and reveal the underlying canvas. The background page is loaded and the canvas animation proceeds and reveals the background page.

3 comments

I believe this is all the code for it: https://gist.github.com/2476246. Line 343 (the $ function declaration) initialized the script and line 363 initialized the canvas element. You're right, not CSS3.

The two image sprites are http://www.google.com.au/logos/2012/sundback12-hp-l.jpg and http://www.google.com.au/logos/2012/sundback12-hp-s.png.

But when i checked in Firebug i am only able to see the following img (top half) https://www.google.com/logos/2012/sundback12-hp.jpg
At some point they hide the image and create the canvas. If you right-click the zipper and click inspect, it selects the canvas for me right away.
> When you touch the zipper

Actually, you can start dragging anywhere on the logo and it will still unzip.

you should patent that...