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.


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?


The effect is achieved using the isotope jQuery plugin.
Here’s a tutorial: http://www.9bitstudios.com/2013/04/jquery-isotope-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.