Avgrund.js | Hacker News Reader

Avgrund.js

labs.voronianski.com

179 pointselectic40 comments

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

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

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.

Same here, Chrome stable on Win 7: http://i.imgur.com/1MXJp.jpg

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.

It's fine on my machine.

It's a software problem, not a hardware problem. Probably just your browser.

Our frontend guy had a lot of issues with animation performance on the different browsers recently, he could probably speak to how big of a pain in the ass it is.

I gave it a shot in Safari (instead of Chrome). Worked better, but still not perfectly lucid. I'm on a RMBP with GPU active. Anyone else with this configuration having stuttering?

'11 MBP and it's smooth as butter... thinking about it though perhaps JS support at that resolution is pushing it too hard.

Perfectly smooth on a '12 MBA under chrome.

It works fine on my iPhone4 too.

Seriously? As in if you recorded a video and looked at each frame, every one would be distinct from the previous frame? Why can't a RMBP run it then?

The rMBP's graphics card is, from my understanding, somewhat underpowered given the number of pixels it has to push. I've heard fairly widespread reports of its framerate in graphics-intensive situations being less than desirable.

The iPhone or MBA, on the other hand, have far fewer pixels to push around.

Also, it seemed totally smooth on my mid-2010 iMac running 10.8.1 with Safari 6.

It's probably due to most browser rendering engines not being tuned to handle that kind of resolution.

Chrome 21 on the rMBP is incredibly under-optimized. I've switched to using Chrome Canary and browsing is much more fluid.

iOS+Mac Safari, Chrome are okay. Firefox is sort of ok. Opera not so much. Webkit seems to be doing a good job.

(checked on iPad, iPhone , MacBook air, iMac)

It's almost perfect on my machine. (Same as yours.)

I'm on a Windows machine right now (ugh), and only Safari 5 renders it absolutely smoothly. Chrome and Firefox (latest versions) fail miserably (Chrome is something like 15 fps with a 500 ms lag at the beginning, Firefox at 20 fps).

This is the first time I've seen Chrome performing worse than Safari on Windows (they're usually on par, with Chrome a little better sometimes).

More info in case it's useful to OP: Windows Vista, latest service pack I presume. 2.53 Core 2 Duo, a 4 year old graphics card (quite good for its day, but naturally not so hot these days), 4 or 5 gigs of RAM.

Works fine for me, Chrome Win7. I only have integrated graphics, too.

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.

We have it. It's called WPF.

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.

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.

Erm, don't we already have a "native app model" for PCs?

Works perfectly fine for me.

(Linux Mint 13, Xinerama, Chrome)

It's really weird like that. I remember playing around with CSS3 with some gloss, gradients, and rounded borders, and something like nine boxes with the effects applied just ruined your browser. I had no idea what to do about it at the time, and as it was just me playing around, I decided to abandon it.

There are some really weird bottlenecks in writing websites that are still beyond me.

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.

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

Radar is really cool, and interesting to play with:

http://lab.hakim.se/radar/

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.

@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

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.

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.

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

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

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.

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

Awesome but makes me dizzy

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

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?

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.

Reply on news.ycombinator.com