5 ms·
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 no
by travisglines 14y 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.
- AdamTReineke 14y agoI believe this is all the code for it: https://gist.github.com/2476246 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 http://www.google.com.au/logos/2012/sundback12-hp-l.jpg and http://www.google.com.au/logos/2012/sundback12-hp-s.png http://www.google.com.au/logos/2012/sundback12-hp-s.png.
- startupsdesigns 14y agoBut 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 https://www.google.com/logos/2012/sundback12-hp.jpg
- AdamTReineke 14y agoAt 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.
- goblin89 14y ago> When you touch the zipper Actually, you can start dragging anywhere on the logo and it will still unzip.
- xenonite 14y agoyou should patent that...