6 ms·
How about this? http://petehunt.github.io/react-iphone-photos/#glass http://petehunt.github.io/react-iphone-photos/#glass
by peterhunt 13y ago
How about this? http://petehunt.github.io/react-iphone-photos/#glass http://petehunt.github.io/react-iphone-photos/#glass
- joegaudet 13y agoNow this is interesting, how does it work ?
- jakobe 13y agoThey use a webkit CSS extension: "-webkit-filter:blur(5px)"
- comex 13y agoThere's a Firefox bug to implement it: https://bugzilla.mozilla.org/show_bug.cgi?id=660196 https://bugzilla.mozilla.org/show_bug.cgi?id=660196
- joegaudet 13y agoThat blurs the content inside of a div, how is the content tied in, is it scroll synched?
- peterhunt 13y agoI 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 :)
- zuppy 13y agoHere's a screenshot for a quick view: https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013%2C%2011%2011%2011.png https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013... It looks better when you see it moving.
- cheeaun 13y agoAny reason why it's only available for iPhone 5?
- peterhunt 13y agoThree 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.
- Zecc 13y ago>> <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.
- peterhunt 13y agoThere was some small text centered on the screen specifying the demo is only available on iPhone 5 (see comment above for why)