Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    Austin, Texas, USA
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do you get this effect?

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,449
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    maybe something like :
    Code:
    <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.
    Last edited by rnd me; 12-06-2012 at 05:56 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •