How do I achieve Yahoo Weather ScrollView Effect?
I'm really interested in creating a UIScrollView similar to the Yahoo Weather app. Here's an example on video:
I have found this Git which will alow me to do the fade background thing:
But how would I achieve the blur effect at the top so that as content scrolls up, it almost fades out behind the UINavigationBar
Any help would be appreciated!!
I wrote the code for the UI effects in the Yahoo! Weather app, would be happy to answer your question.
Sounds like you've figured out how to do the blur (fade between a blurred image based on pixel offset, maxing out at a certain amount... for even better effect, you can have multiple steps in the blur - i.e. fade between non-blurred to half-blurred, then half-blurred to full-blurred etc).
For the fading under kind of effect, you can set the mask property on your content view's layer:
The mask is an image that fades from transparent to opaque.
I am probably a little late for the party but I have an example project that does exactly that. I did try to look through Yahoo! app for the said image mask Iain was talking about. I have yet to be able to use it the way he described. So I created a CALayer on the fly to achieve the effect.
(@Iain, awesome job! big fan)
I haven't personally tried it but this might be a good start: https://github.com/kronik/DKLiveBlur
Sources of DKLiveBlur and Demo app to show live blur effect similar to yahoo weather iOS app.
I achieved a similar effect using FXBlurView: https://github.com/nicklockwood/FXBlurView
You simply set the blurRadius relative to the amount scrolled: scrollView.contentOffset.y
Thanks to Iain for pointing out CALayer masks.
Download the sample code for blur from Evan Davis blog.