Hacker News Reader

Comment by M4v3R | Hacker News Reader

I've looked into this as well. At the moment it is impossible to achieve this effect in plain HTML/Javascript/CSS. It would probably need some Canvas/WebGL magic to work for live content below the navigation bar, but that feels like overdoing it. Achieving blur in CSS is possible, but it's different - you apply blur to an element itself, not to a background of element that covers it.

View on HN

This demo comes close (only works on the phone, and make sure to swipe up to see the menu): http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html

I forget where this comes from, I just have the link.

Yes, I've seen it an a few others demos. But the difficulty here is to make the content blurred while it scrolls. It's extremely smooth on iOS 7 beta and I can't see anyway to reproduce properly in HTML without severely compromising the performances.

I think this is actually possible if you use synthetic scrolling (i.e. interpret touch events, compute intertia and use translate3d + requestAnimationFrame). You'd basically have 2 copies of the content area, one blurred w/ css and one not blurred. Render the blurred one above the non blurred one and scroll them in lock step.

You can probably get ok performance if you don't have a lot of images.

A high quality implementation of synthetic scrolling is available at http://github.com/zynga/scroller if you want to play with it.

Hmm, I've tried something like that (although not as elaborate), but it really was sluggish... It may work but I think you should at least need an iPhone 4S or 5.

As I said, it's hard/close to impossible to reliably achieve this effect for live content. With static content you can use CSS filters to do the blurring.

Reply on news.ycombinator.com