View Full Version : How do you get this effect?

12-05-2012, 08:48 PM
When I reload this page (http://automattic.com/news/) (http://automattic.com/news/) the content starts from the top left and is "fanned out" onto the page.

I'm new to JS and I couldn't understand much off the Chrome inspector.


Old Pedant
12-05-2012, 09:03 PM
Well, that seems to be some proprietary code, but the concept doesn't seem too difficult. I can think of two ways to do it, right off. Give me a while and I'll come up with a few more ways.

Simplest way:

Put an overlay <div> on the page to start with, one that covers the main area of the page. Then use JS to "shrink" that overlay, moving its top left corner down and right over a period of time. Thus the content of the page is progressively revealed.

But I think we could refine that.

rnd me
12-06-2012, 05:53 AM
maybe something like :

body #mydiv>* {
zoom: 0.1;
-o-transition-property: all; -o-transition-duration: 120ms;
-webkit-transition-property: all; -webkit-transition-duration: 120ms;
-moz-transition-property: all; -moz-transition-duration: 120ms;
transition-property: all; transition-duration: 120ms;

body.zoom1 #mydiv>* { zoom: 0.3; }
body.zoom2 #mydiv>* { zoom: 0.6; }
body.zoom0 #mydiv>* { zoom: 1; }
setTimeout("document.body.className='zoom1';", 60);
setTimeout("document.body.className='zoom2';", 140);
setTimeout("document.body.className='zoom0';", 220);

where #mydiv is a selector pointing to the repeating item container.