SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Effect triggers when you refocus on browser tab

    I have seen such effect before on Apple website but this one really cool: http://qindex.de/site/category/all/ . So what's happening here if you click on above link and let the page load in background, while you open up another tab and come back on this tab afterwards, the page will show some cool gallery effect and put contents in place.

    I'm guessing this has been done by jquery focus method. But I want to know more what this effect called so that I can google and implement on my site.

    Thanks.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What your referring to is browser painting, when you leave one tab for another one the browser pauses all page repainting and DOM changes until its active again. All you need to do is build your page and the browser will handle the focused type effect you see.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    What your referring to is browser painting, when you leave one tab for another one the browser pauses all page repainting and DOM changes until its active again. All you need to do is build your page and the browser will handle the focused type effect you see.
    There's something that holds everything in top-left corner of browser. When browser tab is re-activated gallery items are being thrown and the items placing themselves in position.

    I was asking about that effect. - How that was achieved?

    Thanks,

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    The effect is achieved using the isotope jQuery plugin.
    Here's a tutorial: http://www.9bitstudios.com/2013/04/j...tope-tutorial/

    FWIW, the sliding effect can be witnessed on every page load and is also triggered on resize.
    You don't need to let the page load in the background.


Bookmarks

Posting Permissions

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