Hacker News Reader

Hacker News

Comment by peterhunt | Hacker News Reader

Parent Full thread

peterhunt

How about this? http://petehunt.github.io/react-iphone-photos/#glass

View on HN

Here's a screenshot for a quick view: https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013...

It looks better when you see it moving.

Any reason why it's only available for iPhone 5?

Three reasons.

1. Blur filter is only available on WebKit 2. I know for sure how much texture memory is on an iPhone 5 3. The touch event latency on android is too damn high.

>> <h1>If you see this, something is broken.</h1>

The funny thing being that I only saw that because I browsed the source, because the page was so broken for me that I only saw a black screen.

In any case, I see

    Message(null, " This demo is only available for iPhone 5 and iOS 7. Sorry! " )

So I'm out of here.

There was some small text centered on the screen specifying the demo is only available on iPhone 5 (see comment above for why)

Now this is interesting, how does it work ?

They use a webkit CSS extension: "-webkit-filter:blur(5px)"

There's a Firefox bug to implement it: https://bugzilla.mozilla.org/show_bug.cgi?id=660196

That blurs the content inside of a div, how is the content tied in, is it scroll synched?

I do synthetic scrolling (translate3d() + touch event interpretation and inertial math). Then duplicate the DOM for the top and bottom bars, adjust the positioning to make them look fluid and apply the CSS blur filter.

It's easy with React :)

Reply on news.ycombinator.com