

Avgrund.js - electic
http://labs.voronianski.com/jquery.avgrund.js/#

======
benjoffe
One of the most important things to get right with lightbox libraries is
making sure they work well when the user has already scrolled down the page,
this one fails in that case: <http://i.imgur.com/Gh1Vd.png>

~~~
artursapek
I don't get that, it's fine for me. (Chrome 21.0 Mountain Lion)

~~~
encoderer
I see the same thing the GP does, Chrome 21.0.1180.82 on Lion.

I re-created the test by shrinking the browser window on the Y axis and then
pressing the button with the page mostly scrolled down.

------
Xcelerate
It seems to stutter a lot. I'm continually amazed that 9.2 billion clock
cycles per second + GPU isn't enough to render a webpage animation smoothly.

Other than that, looks really cool! I particularly like the background blur.
We're starting to see some really cool effects with CSS3.

~~~
soup10
Works fine for me but it's not 60fps. Animation and graphics in javascript
will never be good. I can't wait for the native app model to come to PC's so
we can stop shoehorning all this crap into html/javascript which it was never
designed to support.

~~~
Alexx
In this example the animation and effects aren't using javascript, the
javascript is just is just firing the events. CSS3 (as implemented here) can
leverage the same general advantages as a native app (GPU acceleration, etc).
It's still early days, so browsers are various levels of implementation
support, but the point is that moving forward it's not crippled by the same
limitations of javascript DOM manipulation; vendors can actually optimize the
software and hardware support.

I'd say it's quite likely animation and graphics in the browser (not
specifically javascript) WILL be good.

~~~
soup10
Low-level access to memory, cpu, and graphics(through opengl or directx
bindings) are all needed to approach what the hardware is capable of. Pipeline
bottlenecks are the real performance killers. Vendors can spend decades trying
to fix them one by one, but there's no real substitute for low-level access.

------
atlassic
For the curious and/or lazy, the core of the trick is

    
    
      -webkit-filter: blur(1px);
    

plus

    
    
      -webkit-transform: scale(0.9);
    

and requisite wrapping. I'm sure I'm not the only one that just learned the
former existed (and is supported!), so I thought I'd point it out.

------
hbien
Wow! I just took a look at the original author's page and he's got some
amazing stuff: <http://hakim.se/experiments>

~~~
knowtheory
To be clear, this jQuery plugin was not made by @voronianski not @hakimel. The
original Avgrund concept is Hakim's. I think the way this was presented is
really freaking confusing.

~~~
ksmtk
@hakimel is Hakim El Hattab :) he's author of original idea. but @voronianski
(Dmitri Voronianski) have brought this idea to plugin that everybody can use
with ease

------
sprobertson
Is there any way you can see this several levels deep? I think it would be a
cool way to keep visual context of navigation.

------
sachleen
Really neat. I think it would be better if it didn't do any sort of blurring
on IE. Not sure if that's a side effect of zooming out the page or blur but
the page content looks horrible when the modal is up.

------
electic
Yea, this might be the cooleset modal I have seen. Thought I'd share it.

------
mmackh
Great job, I'm actually very surprised as this is the javascript first
animation I've seen that runs smooth on an iPad (3)

~~~
zpao
The trick is that it's not using JS to animate (not setting position manually
or even depending on requestAnimationFrame). It's using CSS transitions to let
the rendering engine optimize the animation.

------
zxoq
You can't click outside the page (ie. on the background texture) to close the
modal. But it looks great!

------
president
Awesome but makes me dizzy

------
SeckinJohn
does not work properly on iphone if you zoom in and then click show

------
meritt
Relevant code for most of us without downloading a zip:

<http://labs.voronianski.com/media/js/jquery.avgrund.js>

<http://labs.voronianski.com/jquery.avgrund.js/avgrund.css>

Is it really too complicated to simply link to a repo somewhere?

~~~
electic
There is a banner on the side to GitHub and a link in the demo to GitHub as
well. So yea, not going to link it here. Click on it. The demo is more
important.

