How do you get this effect?

[thebigkick]

When I reload this page (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.

thanks

[Old Pedant]

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]

maybe something like :

<style>
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; }
</style>
<script>
setTimeout("document.body.className='zoom1';", 60);
setTimeout("document.body.className='zoom2';", 140);
setTimeout("document.body.className='zoom0';", 220);
</script>

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